vue 中 watch如何监听数组或对象中的某个值?
使用watch监听数组或对象时, 发现返回的新旧值是一样的, 官方文档给出了答案 :这需要使用到 this.$set方法 , 它接受三个参数:(object / array , properyName / index , value) ,看下实例 :在 data中命名一个对象 a, 一个数组 b :data () {retutn {a : {name : 'lily', age : 18} ,b
·
使用watch监听数组或对象时, 发现返回的新旧值是一样的, 官方文档给出了答案 :
这需要使用到 this.$set方法 , 它接受三个参数 : (object / array , properyName / index , value) ,
看下实例 :
在 data中命名一个对象 a , 一个数组 b :
data () {
retutn {
a : {name : 'lily', age : 18} ,
b : [
{name : '小明' , age : 14} ,
{name : '小红' , age : 15}
]
}
} ,
在methods中对 a , b 进行操作 :
methods : {
set() {
this.$set(a , 'age' , 20);
this.$set(b, 1 , {name : '小红' , age : 16} ;
}
}
在computed监听新变量 , 一定要用JSON.parse 和 JSON.stringify 转化一下, 不然watch监听时返回的新旧值还是一样的 .
computed : {
newA : function () {
return JSON.parse(JSON.stringify(this.a))
} ,
newB : function () {
return JSON.parse(JSON.stringify(this.b))
}
}
watch监听 , handler函数的两种写法都是可以的, 但是不能使用箭头函数 .
watch : {
newA : {
handler : function (newVal, oldVal) {
console.log(newVal,oldVal)
},
immediate : true //初始化页面后立即监听
} ,
newB : {
handler (newVal , oldVal) {
console.log(newVal , oldVal)
} ,
immediate : true
}
}
触发set方法后 , 最后打印的结果 :
完结 , 撒花✿✿ヽ(°▽°)ノ✿
更多推荐
已为社区贡献1条内容
所有评论(0)