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>

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

1 个答案: