Vue.js输入字段在输入一个字符后失去焦点 [英] Vue.js Input field loses its focus after entry of one character

问题描述

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

I have a view with an input field, which can be multiplicated by a given button. The problem is that after any entry of a char, the focus of the input field is lost. You have to click again to enter another char.

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

Do someone have a clue what could be the problem?

我的模特：

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

推荐答案

问题是您正在使用更改值键。 Vue期望 key 指示项目的唯一标识符。当你改变它时，它就变成了一个新的项目，必须重新渲染。

The problem is that you are using a changing value as key. Vue expects key to indicate a unique identifier for the item. When you change it, it becomes a new item and must be re-rendered.

在下面的代码片段中，我有两个循环，都使用相同的数据源。第一个是按照你设置的方式键入的。第二个使用 index （可能不是你需要的，但重点是使用你正在编辑的东西;在这个例子中，<$ c $无论如何都不需要c> key ）。第一个展示了你描述的失焦，第二个展示了预期。

In the snippet below, I have two loops, both using the same data source. The first is keyed the way you have it set up. The second uses index instead (that may not be what you need, but the point is to use something other than what you're editing; in this example, key isn't needed anyway). The first exhibits the loss-of-focus you describe, the second works as expected.

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输入字段在输入一个字符后失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！