vue watch如何同时监听多个属性
vue watch如何同时监听多个属性
最近在做vue的项目,在使用watch监听属性的时候发现需要同时监听三个属性,作为刚入门的小白,只接触过监听一个属性,上网查找了别人的做法后,找到了解决的方案。
第一种方法
data () {
return {
name1: '',
name2: '',
age: ''
}
},
watch: {
'name1': function (val) {
if (this.name1 === this.name2) {
this.$set(this,'age',1)
} else {
this.$set(this,'age',null)
}
},
'name2': function (val) {
if (this.name1 === this.name2) {
this.$set(this,'age',1)
} else {
this.$set(this,'age',null)
}
}
}
这个方法就是分开下来单独监听每个属性,只要name1或name2改变了,都会执行相应的方法,但是这样写的话重复的代码很多,这显然是不想看见的
第二种方法
data () {
return {
name1: '',
name2: '',
age: ''
}
},
computed: {
listenChange () {
const {name1,name2} = this
return {name1,name2}
}
},
watch: {
listenChange (val) {
console.log('listenChange :', val)
if (val.name1 === val.name2) {
this.$set(this,'age',1)
} else {
this.$set(this,'age',null)
}
}
}
如果不能直接监听多个属性的话,我们可以换个想法,先将多个属性放在一个对象中,直接监听这个对象就可以了,这时候返回的val将会打印出你输入的name1,name2的内容,可以同时监听到这两个属性