Javascript 可切换文本/输入字段中的自动对焦输入框

我正在构建一个“toggleable”表单，我希望

标签在单击时变成

标签

以下JSFIDLE实现了这一点：

主要位如下所示：

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

{{msg.txt}

为了获得良好的用户体验，我希望

框在取消隐藏时能够聚焦，以便用户可以立即开始键入

我的问题有点复杂，因为我无法预测表单中会有多少输入字段（正如您从JSFIDLE中看到的，我使用

for

循环生成了组）

如何将焦点设置为新推出的

框？

{{{msg.txt}
切换（索引、事件）{
this.messages[index].edit=！this.messages[index].edit
此.$nextTick（函数（）{
event.target.parentNode.querySelector（'input'）.focus（）
});
}

尝试这种方法-您可以通过在单击绑定中传递$event来在Vue中公开事件，然后我们只需检查单击的目标，找到同级输入，并在Vue完成下一步后将其聚焦（在本例中，当组件重新渲染且文本框可见时）

享受吧

<div v-for="(msg, index) in messages" :key="msg.txt">
    <div :class="{editing: msg.edit}">
      <p v-on:click="toggle(index, $event)">{{msg.txt}}</p>
      <input type="text" v-model="msg.txt">
    </div>
  </div>

toggle(index, event) {
      this.messages[index].edit = !this.messages[index].edit
            this.$nextTick(function(){
        event.target.parentNode.querySelector('input').focus()
      });
    }