在vue项目中,给data里的对象属性添加或者删除属性并不会被监听到,也不会触发视图更新,因为vue.js在初始化实例时就已经将其属性转为getter/setter
要处理这种情况,就可以使用$set()方法,既可以新增属性,又可以触发视图更新
this.$set(对象名,属性名,属性值) 或者 Vue.set(对象名,属性名,属性值)
使用案例:
取msg对象的前两个属性赋值为data里obj对象
data(){
return{
obj:{
arr:[]
}
}
}
let msg = {
name:"小明",
age:12,
sex:"man",
grade:90
}
let keyarr = Object.keys(msg);//["name","age","sex","grade"]
keyarr.length = 2;
keyarr.map(key=>{
this.$set(this.obj.arr,key,msg[key])
})
//obj:{
// name:"小明",
// age:12,
//}