VUE对json对象属性的监听watch用法详解(单一属性和全体属性)
如何监听json对象的属性变化。对于下面数据filterdata,如果直接watch对象中method属性变化是无效的,因为监听不到。现在提供两种常用的方法监听属性的变化。var app1 = new Vue({el: "#appdata: {filterdata: {methods: [],targets: [],results: [],id: ...
·
如何监听json对象的属性变化。
对于下面数据filterdata,如果直接watch对象中method属性变化是无效的,因为监听不到。现在提供两种常用的方法监听属性的变化。
var app1 = new Vue({
el: "#app
data: {
filterdata: {
methods: [],
targets: [],
results: [],
id: '',
},
},
监控所有属性
任何一个属性变化,都会触发watch函数。
关键字 deep:true一定要设定
watch: {
filterdata: {
handler(newValue, oldValue) {
var flag=0;
if (newValue.id === '0') {
flag=1;
}
if (newValue.methods.length+newValue.targets.length+newValue.results.length > 0) {
flag=1;
}
this.filteractive = flag;
},
deep: true
},
}
监控某一个属性
单引号内部写 对象.属性名即可实现某个属性变化的监听。
'filterdata.id': function() {
if (this.filterdata.id === '0') {
this.filterdata.methods = [];
this.filterdata.targets = [];
this.filterdata.results = [];
}
},
'filterdata.methods': function() {
if (this.filterdata.methods.length > 0) {
this.filterdata.id = '';
}
},
'filterdata.targets': function() {
if (this.filterdata.targets.length > 0) {
this.filterdata.id = '';
}
},
单一属性和全体监控区别
控制精细程度不同,在特定场景下必须监听单一属性,更容易控制。
更多推荐
已为社区贡献6条内容
所有评论(0)