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

最新推荐文章于 2023-02-22 08:57:22 发布

小巷陌影

最新推荐文章于 2023-02-22 08:57:22 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue javascript

本文链接：https://blog.youkuaiyun.com/xiaoyanli8077/article/details/88915528

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文介绍如何使用Vue.js中的computed属性和watch来监听复杂数据结构的变化，特别是对于嵌套数组中的特定值进行实时更新处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

var real_vm = new Vue({
	el:"#real_info",
	data:{
		items:[{
			type:0,
			title:'火灾报警系统',
			alarmData:210,
			modules:[{
	            color:"red",
	            icon:"<i class='layui-icon layui-icon-fire'></i>",
	            style:'solid',
	            bcolor:'white',
	            children:[{
		                name:"火警未处理",
		                value:0
	            },{
		                name:"今日处理",
		                value:5
	            }]
            },{
	            color:"blue",
	            icon:"<i class='layui-icon layui-icon-set-fill'></i>",
	            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;
		}
	}
})