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

尝试这一个配合 - 你可以通过在你的点击绑定中传递$ event来在Vue中公开事件，然后我们只需检查点击的目标，找到兄弟输入并在Vue完成它之后将其关注它＆＃39 ; s nextTick（当组件重新渲染时，在这种情况下，文本框可见）

享受！

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

1 个答案: