Vue input automatically loses focus after entering one character at a time

The

code is as follows. The problem is that every time I type in the input box, the input box automatically loses focus.
ps: implements the function that every time you click the add button, an object is added to the name array of list objects, and a new input, is generated. You will encounter the above problem in this 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:""})
    }
 }
Jul.27,2021

the problem is that after the model is updated after key='item.data',input data binding, the properties of div are refreshed, and the input is refreshed after rendering. If you are looking for div, in the code, you are advised to find the parent node of the input directly, instead of using the data bound by the child node to assign values to the properties of the parent node.


directly: key='item.index'

Menu