vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
vue input每次输入一个字符后自动失去焦点代码如下,遇到的问题就是:我在输入框输入的时候,每输入一次,输入框就自动失去焦点了。ps:实现的功能是,每点击一次添加按钮,然后就会为list对象的name数组添加一个对象,这个时候就会生成一个新的input,在这个input输入就会遇到如上问题<div class="addTags" v-for="(item,index) in...
·
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:''
}
)
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)