vue开发在写事件监听时直接使用watch不起作用,查了下需要用到watch的deep属性,过程如下
有一个对象:
data () {
return {
valueGroups: {
systemValue: 0,
firstValue: [],
secondValue: [],
thirdValue: [],
}
}
}
刚开始直接设置监听:
watch: {
valueGroups: function (val) {
console.log(val)
}
}
这样对于普通数据字符串、整形以及数组等等都是有作用的,但是对于对象这样的数据不起作用
查阅vue api文档关于watch api的介绍发现vue为了监听对象内部值的变化,可以在参数中指定deep: true 属性,于是修改如下:
watch: {
valueGroups: {
deep: true,
handler: function (val) {
console.log(val.firstValue)
}
}
}
成功监听!