最近在Vue中将一个object数组与form绑定后,在尝试重置其中一个form的值时,使用了常见的赋值方法,如下
data(){
return{
productMerit:[
{name:'',icon:'',description:''},
{name:'',icon:'',description:''},
{name:'',icon:'',description:''},
{name:'',icon:'',description:''},
{name:'',icon:'',description:''},
{name:'',icon:'',description:''}]
}
}
method(){
btnclick(index){
productMerit[index]={name:'',icon:'',description:''};
this.$forceUpdate();
}
}
结果发现数据绑定出现了问题,经过检查发现更改后的数组变成了
点开object会发现正常绑定的object相比普通的object多了很多的方法和属性
经过查阅资料得知,vue通过__ob__监听数据的变化以实现对数据的双向绑定,直接使用赋值操作使得数组中新绑定的object缺失了这些方法,自然会导致数据无法正常与控件绑定
解决方法有两个
一是使用$set
this.$set(this.productMerit,index,{name:'',icon:'',description:''})
二是使用splice方法
this.productMerit.splice(index,1,{name:'',icon:'',description:''});