Vue.js 输入字段在输入一个字符后失go 焦点

发布于03月29日

我有一个带有输入字段的视图，它可以被给定的按钮乘以.问题是，在输入任何字符后，输入字段的焦点都会丢失.您必须再次单击以输入另一个字符.

有人知道问题出在哪里吗？

我的模型:

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

推荐答案

问题是，您使用的是一个不断变化的值，即key.Vue希望key表示该项的唯一标识符.当您更改它时，它将成为一个新项目，必须重新渲染.

在下面的代码片段中，我有两个循环，都使用相同的数据源.第一个是按设置方式键入的.第二个使用index(这可能不是您需要的，但重点是使用您正在编辑的内容以外的内容；在本例中，key无论如何都不需要).第一个展示了你所描述的失go 焦点，第二个正如预期的那样.

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>