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

Question

我有一个带有输入字段的视图,可以通过给定按钮进行乘法.问题是在输入char之后,输入字段的焦点就会丢失.您必须再次单击以输入另一个字符.

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

我的模特:

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