Vue3 setup中 如获取动态添加的元素ref?

Question

const currInput = ref()

我在setup中新建了一个dom元素ref, 然后用这个ref动态添加一个input输入框, 我想添加完输入框的同时 让input获取焦点.
可是我用currInput.value.focus() 报没有此方法。。 我试了试 是动态渲染元素的问题, 我直接页面写死这个ref 就能使用focus()。
求大佬解答...

就是想动态添加的同时获取焦点
即使用nextTick也不行, 虽然获取到了dom 但是不完整, 无法执行focus()方法.
Vue3是真的坑啊。。。。。。。。

Answer 1

在 SFC Playground 上写了个简单的示例出来

主动调 focus 果然是不行，大概是跟生命周期有关。直接在组件的 onMounted 中去设置焦点就可以了。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

看vue官网生命周期，setup执行时还未挂载至dom中，在 onMounted 中执行 focus 即可