vue input每次输入一个字符后自动失去焦点-与绑定值:key有关

vue input每次输入一个字符后自动失去焦点

代码如下，遇到的问题就是：
我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。
ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题

 <div class="addTags" v-for="(item,index) in list.name" :key="item.data">
    <input type="text" v-model="item.data">
 </div>
 <span class="add"  @click="addData()">+请添加</span>


 data() {
  return: {
     list: {
          name: []
        }
  }
 },
 methods: {
 addData() {
      this.list.name.push({data:''})
    }
 }

原因

问题在于:key=’item.data’，input数据也通过v-model="item.data"绑定了，当修改了input数据时，:key的数据也跟着变了，因此页面key所在的元素进行重新渲染，因此焦点会消失。

解决办法

更改:key的绑定值，改成dataId

<div class="addTags" v-for="(item,index) in list.name" :key="item.dataId">
    <input type="text" v-model="item.data">
 </div>
 <span class="add"  @click="addData()">+请添加</span>


 data() {
  return: {
     list: {
          name: []
        }
  }
 },
 methods: {
 addData() {
      this.list.name.push(
	      {
	      dataId: Date.now()
	      data:''
	      }
      )
    }
 }