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

Question

我有一个带有输入字段的 View ，它可以与给定的按钮相乘。问题是在输入任何一个字符之后，输入字段的焦点就会丢失。您必须再次单击才能输入另一个字符。

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

我的模型:

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

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>