划重点:由于javascript的限制,修改data对象内部某个数据后,并不会触发视图更新,
原因: ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。换句话说,vue对象内部不会设置访问器(观察者),你要改变他让它触发视图更新,可以手动调用this.$set()
data () {
return {
student: {
name: ''
},
teach:["李磊"]
}
}
---手动分割线---
我们在this.student.name="XXX"之后,并不会触发视图更新
复制代码
第一种办法嚎+写法
this.$set(this.student,"name", "王二小")//对象写法
this.$set(this.teach,0, “韩梅梅”) //数组写法
复制代码
第二种办法deep,文档还有另外两种写法,可自行查阅
//组件内写法
watch:{
student:{
handler:(n,o)=>{
//逻辑处理
},
deep:true
}
}
复制代码
所有评论(0)