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

Question

我正在构建一个我想要的“可切换”表单 <p>标签变为 <input>点击标签。

以下 JSFiddle 执行此操作:https://jsfiddle.net/50wL7mdz/314578/

主要内容如下:

<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>

为了良好的用户体验，我想要 <input>框在取消隐藏时成为焦点，因此用户可以立即开始输入。

我的问题有点复杂，因为我无法预测表单中将有多少输入字段(正如您从 JSFiddle 中看到的那样，我使用 for 循环生成了组)。

如何将焦点设置到新推出的 <input>盒子？

Answer 1

https://jsfiddle.net/50wL7mdz/314662/

<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()
      });
    }

试试这个伙伴 - 您可以通过在点击绑定(bind)中传递 $event 来在 Vue 中公开事件，然后我们只需检查点击的目标，找到同级输入并在 Vue 完成它的 nextTick (当组件重新渲染时，在这种情况下文本框可见)

尽情享受吧!