Vue 监听多层数组中数据变化

computed与watch配合监听多层数组下的数据变化 

var real_vm = new Vue({
	el:"#real_info",
	data:{
		items:[{
			type:0,
			title:'火灾报警系统',
			alarmData:210,
			modules:[{
	            color:"red",
	            icon:"",
	            style:'solid',
	            bcolor:'white',
	            children:[{
		                name:"火警未处理",
		                value:0
	            },{
		                name:"今日处理",
		                value:5
	            }]
            },{
	            color:"blue",
	            icon:"",
	            style:'solid',
	            bcolor:'white',
	            children:[{
		            name:"故障未处理",
		            value:20
	            },{
		            name:"今日处理",
		            value:12
	            }]
            }]
		}]
	},
	watch: {
		  fireValue: {
		    handler:function(newValue, oldValue) {
					var c = ["red","white"];
					var t = this.items[0].modules[0];
					if(newValue > 0){
						if(comm.isEmpty(task)){
							task = refreshCount(t,c);
						}
					}else{
						window.clearInterval(task);
						task = "";
						t.bcolor = c[1];
					}
		    }
		  },
		   faultValue:{
			   handler:function(newValue, oldValue) {
				    var c = ["blue","white"];
				    var t = this.items[0].modules[1];
					if(newValue > 0){
						if(comm.isEmpty(task1)){
							task1 = refreshCount(t,c);
						}
					}else{
						window.clearInterval(task1);
						task1 = "";
						t.bcolor = c[1];
					}
		    }
		  }
	},
	computed: {
		fireValue:function(){//火警未处理
			return this.items[0].modules[0].children[0].value;
		},
		faultValue:function(){//火警未处理
			return this.items[0].modules[1].children[0].value;
		}
	}
})

 

你可能感兴趣的:(vue,javascript)