Vue之动态渲染的input框获取焦点问题

04-15· 1分钟

场景：个人信息页面，点击资料显示输入框以更改信息，这里用 v-show 显示和隐藏 input 元素，所以需要让使用 v-show 或者 v-if 动态控制的 input 输入框在显示时自动获取焦点。

尝试

  1. 在元素标签加上 autofocus="autofocus"

    无效

    原因：autofocus 属性是在当页面加载时自动获得焦点。

  2. 使用 vue 指令 v-focus

    无效

  3. 使用 ref 传递 input 元素，手动添加 focus 事件， this.$refs.input.focus();

    无效，并报错。错误原因，点击是元素还未被渲染，因此无法获取到元素本身，自然无法找到 focus 事件

  4. 在尝试 3 的基础上使用 $nextTick的回调函数

1
2
3
this.$nextTick(() => {
    this.$refs.input.focus()
})

问题解决。

总结

在 vue 中，并不是每次数据改变都会触发更新 DOM，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行 DOM 更新操作。

通常情况下，我们不需要关心这个问题，而如果想在 DOM 状态更新后做点什么，则需要用到 nextTick。

在 vue 生命周期的 created()钩子函数进行的 DOM 操作要放在 Vue.nextTick()的回调函数中，因为 created()钩子函数执行的时候 DOM 并未进行任何渲染，而此时进行 DOM 操作是徒劳的，所以此处一定要将 DOM 操作的 JS 代码放进 Vue.nextTick()的回调函数中。

参考：官方文档

前端Vue