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>

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>

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

Vue.js Input field loses its focus after entry of one character

javascript

focus

vue.js