Vue.js输入框在输入一个字符后失去焦点

Question

我有一个视图，其中包含一个输入字段，可以通过给定的按钮进行复制。问题是，在输入任何字符后，输入字段的焦点会丢失。您必须再次单击以输入另一个字符。

有人知道可能是什么问题吗？

我的模型：

'model': [
    ...,
    'filter': [
        ...,
        'something': [
            'string'
        ]
    ]
]

我的代码：

<div v-for="(something, index) in model.filter.something" v-bind:key="something">
    <input type="text" v-model.trim="model.filter.something[index]"/>
</div>

- crazyyou

---

你所包含的代码比较复杂。你能否创建一个最小、完整且可验证的示例？ - Roy J

@RoyJ 已完成，感谢您的第一条反馈。 - crazyyou

你将 something 显示为一个数组，但同时也提到了 model.something.inOrExclude，并且还有 model.filter.something，它似乎也是一个数组。所有的 something 都相关吗？ - Roy J

他们确实是相关的，但并不直接，并且我认为它们不是这个问题的一部分。然而，我注意到我可以进一步减少代码。 - crazyyou

Answer 1

问题在于你使用一个可变的值作为“key”。Vue希望使用“key”来表示该项的唯一标识符。当你改变它时，它变成了一个新的项，必须重新渲染。

在下面的代码片段中，我有两个循环，都使用相同的数据源。第一个按照你设置的方式进行键值关联。第二个使用index代替（可能不是你需要的，但重点是使用其他东西而不是你正在编辑的内容；在这个例子中，key也不需要）。第一个出现了你描述的焦点丢失问题，第二个按预期工作。

new Vue({
  el: '#app',
  data: {
    'model': {
      'filter': {
        'something': [
          'string'
        ]
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  <div v-for="(something, index) in model.filter.something" v-bind:key="something">
    <input type="text" v-model.trim="model.filter.something[index]" />
    {{something}}
  </div>
  <div v-for="(something, index) in model.filter.something">
    <input type="text" v-model.trim="model.filter.something[index]" :key="index" />
    {{something}}
  </div>
</div>

- Roy J

---

对我来说完美无缺，而且你是绝对正确的。一个键必须是具体的这一点非常有道理:D 对我来说，使用索引作为键也可以。非常感谢你。 - crazyyou

非常好用！谢谢！ - Alexey Shabramov

谢谢！很幸运我在尝试寻找答案之前先谷歌了一下 :D - Coisox

哇，这是一个很好的答案，可以帮助理解结构。谢谢。 - basarozcan