Vue数据更新UI不刷新显示 Vue.set( target, key, value )
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况：
一.数据为数组时
1.通过数组索引修改数组元素例如：
export default{
data(){
return{
arr:[
{
a:1,
b:2,
c:3
}
]
}
},
methods:{
update(){
this.arr[0].a=4;
}
}
}
此时ui数据并不会刷新。
2.修改数组长度时：
export default{
data(){
return{
arr:[
{a:1,
b:2,
c:3
}
]
}
},
methods:{
update(){
this.arr.length=4;
}
}
}
解决方案：
export default{
data(){
return{
arr:[1,2,3]
}
},
methods:{
update(){
this.$set(this.arr,0,'a')
}
}
}
如果data为JSON数组则：
export default{
data(){
return{
arr:[{a:1},{a:2},{a:3}]
}
},
methods:{
update(){
var item=this.arr[0];
this.$set(item,' a ' , ' ss ');
}
}
}
第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据。
二、数据为对象时:
Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性
export default{
data(){
return{
obj:{a:1}
}
},
methods:{
update(){
this.$set(this.obj , ' b ' , ' 2 ');
}
}
}
如果要添加多个属性：
export default{
data(){
return{
arr:[{a:1},{a:2},{a:3}]
}
},
methods:{
update(){
this.obj(Object.asign({},this.obj,{
a:2,
b:3,
c:4
})
);
}
}
网友评论