Vue.js在v-for嵌套v-if场景下实现编辑输入框自动聚焦的问题

云上老周

2026-10-3

问题根因

Vue的响应式DOM更新是异步批量执行的，你在setEditing函数里修改editing变量后，Vue不会立刻渲染出输入框元素，此时直接访问$refs.editInput拿不到已经渲染的DOM节点，所以focus()调用无效。

解决方案1：使用`$nextTick`等待DOM更新完成

只需要把获取焦点的逻辑包在this.$nextTick回调中，回调会在Vue完成DOM更新后自动执行，就能拿到已经渲染的输入框元素：

setEditing(entry, index) {
  this.editing = index + 1;
  this.entry = entry;
  // 等待DOM更新完成后再操作
  this.$nextTick(() => {
    const el = this.$refs.editInput[index];
    // 加可选链避免极端情况拿不到元素时报错
    el?.focus();
  })
},

解决方案2：自定义`v-focus`指令（更通用）

如果多处需要自动聚焦功能，可以注册一个自定义指令，自动处理元素显示后的聚焦逻辑，不用每次手动调用方法：

先在组件内注册局部指令：

export default {
  // 其他组件选项...
  data() {
    return {
      // 你的原有数据
    }
  },
  // 注册自定义指令
  directives: {
    focus: {
      // 元素状态更新时触发
      update(el, binding) {
        // 当指令绑定的值为true时自动聚焦
        if (binding.value) {
          el.focus();
        }
      }
    }
  },
  methods: {
    // 你的原有方法
  }
}

在输入框上绑定指令即可：

<input
  ref="editInput"
  <!-- 绑定指令，值为当前项是否是编辑状态 -->
  v-focus="editing == index + 1"
  autocomplete="off"
  @change="console.log(entry)"
  class="edit-input"
  @keyup.enter="saveChanges(index)"
  v-model="entry"
/>