vue当中对于数组元素不仅要用push、splice等方法进行修改,而且修改前后,对象的属性必须完全一致(不能少了一个属性或者多了一个属性)否则很容易会导致数据错误的渲染,我踩的坑就是在使用element的table组件时出现的。这个坑是不会报错的,而且这个问题还是偶发性的,不一定每次都能复现,当时这个坑卡住了我一个下午,所以现在有空就记录一下。
问题具体表现:
注意:我使用的是element的table组件
1、读取数据时,选取的数据和实际行内数据不一致
2、修改数据时,明明修改的是A行数据,但是却把B行的数据也一并改了
问题原因:
很抱歉,我也没找到。我当时百度了一个下午也没找到原因,最后是通过其他能正常操作、渲染的table组件才一步步试错出来的,该错误渲染的情况不知道是elementUI的组件问题还是vue本身是这么限定的。但以后进行数组操作的时候,还是遵守数组内的对象的属性完全一致这个规范比较好。
解决方案:
//源数据:
let data = {
id:1,
data2:2,
data3:3,
data4:4,
data5:{
id:1,
data5_1:'aaa'
}
}
//错误示范:
let wrong1 = {
id:1,
data2:2,
data3:3,
data4:4,
data6:10//这里多了data6属性
data5:{
id:1,
data5_1:'aaa'
}
}
let wrong2 = {
id:1,
data2:2,
//data3:3,//这里少了data3属性
data4:4,
data5:{
id:1,
data5_1:'aaa'
}
}
let wrong3 = {
id:1,
data2:2,
data3:3,
data4:4,
data5:{
id:1,
data5_1:'aaa',
data5_2:'bbb'//这里多了data5_2属性
}
}
//正确示范:
//除了值不一样以外,所有属性与对象里面的属性都必须和源数据一样,
//不能多、不能少、不能改属性名。
let data = {
id:1,
data2:88,
data3:6,
data4:12,
data5:{
id:1,
data5_1:'zzz'
}
}