如何在可切换文本/输入字段中实现输入框自动聚焦？

嗨，这个需求在Vue里其实很好解决，我给你分享两种实用的方案，你可以根据自己的代码场景灵活选择：

方案一：利用$nextTick和ref手动触发聚焦 #

这个方案适合需要精确控制聚焦时机的场景，我们通过条件渲染（v-if）确保输入框只有在编辑状态下才被创建，然后等待DOM更新完成后再调用聚焦方法。

先调整你的模板代码，给每个输入框绑定唯一的ref，并通过v-if控制显示：

<div id="app">
  <div v-for="(msg, index) in messages" :key="msg.txt">
    <div>
      <!-- 非编辑状态显示文本 -->
      <p v-if="!msg.edit" @click="toggleEdit(msg, index)">{{msg.txt}}</p>
      <!-- 编辑状态显示输入框，绑定唯一ref -->
      <input 
        v-if="msg.edit" 
        type="text" 
        v-model="msg.txt"
        :ref="`input-${index}`"
      >
    </div>
  </div>
</div>

然后在Vue实例的方法里，切换编辑状态后用$nextTick等待DOM更新，再获取输入框元素触发聚焦：

new Vue({
  el: '#app',
  data: {
    messages: [{ txt: 'Hello', edit: false }, { txt: 'World', edit: false }]
  },
  methods: {
    toggleEdit(msg, index) {
      msg.edit = !msg.edit;
      // 切换到编辑状态时，等待DOM更新后聚焦
      if (msg.edit) {
        this.$nextTick(() => {
          // v-for生成的ref是数组，取第一个元素即可
          this.$refs[`input-${index}`][0].focus();
        });
      }
    }
  }
});

方案二：自定义v-focus指令（更通用） #

如果你的项目里有多处需要自动聚焦的场景，自定义指令会更省心，一次注册就能全局复用。

首先注册全局的v-focus指令：

// 注册全局自定义指令
Vue.directive('focus', {
  // 当元素插入DOM时自动触发聚焦
  inserted(el) {
    el.focus();
  }
});

然后直接在输入框上添加v-focus指令，配合v-if使用（确保输入框创建时触发指令）：

<div id="app">
  <div v-for="msg in messages" :key="msg.txt">
    <div>
      <p v-if="!msg.edit" @click="msg.edit = !msg.edit">{{msg.txt}}</p>
      <input 
        v-if="msg.edit" 
        type="text" 
        v-model="msg.txt"
        v-focus
      >
    </div>
  </div>
</div>

小提示 #

如果你的原代码是用CSS类（比如.editing）控制显示隐藏（而非v-if），输入框其实已经存在于DOM中只是被隐藏了。这种情况下你可以直接在点击事件里获取输入框元素调用focus()，但v-if的方式更高效——它会在非编辑状态下销毁输入框DOM节点，节省页面资源。

内容的提问来源于stack exchange，提问作者Juicy