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

不念不忘少年蓝@ 2022-02-26 18:46 527阅读 0赞

### 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;
    		}
    	}
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，527人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中监听属性的变化

在Vue中有属性typeId 当属性变化的时候执行函数 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

小灰灰/ 2023年05月31日 03:24/ 0 赞/ 197 阅读

相关监听数组变化

03-监听数组变化 <!DOCTYPE html> <html lang="en"> <head> <meta char

蔚落/ 2023年01月17日 07:45/ 0 赞/ 145 阅读

相关 VUE_vue监听路由变化

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ cons

小鱼儿/ 2023年01月14日 01:41/ 0 赞/ 179 阅读

相关 html 监听后端变化_Vue.js中 watch(深度监听)

![3614479af92b1e18b28f09a4b08bfdec.png][] ![2d0fa97e9e8d96649872706c84acab73.png][] h

「爱情、让人受尽委屈。」/ 2023年01月04日 13:10/ 0 赞/ 362 阅读

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 278 阅读

相关在vue中监听storage的变化

为什么要监听storage的变化？ > 当我们在使用vue的时候，有时候需要一个两个数据在全局共享，vue虽然提供了vuex模块来解决此问题，但是为了一两个数据的共享引入

怼烎@/ 2022年05月09日 23:50/ 0 赞/ 362 阅读

相关 vuex state中的数组变化监听方法

前言首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的v

爱被打了一巴掌/ 2022年04月04日 14:42/ 0 赞/ 384 阅读

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

computed与watch配合监听多层数组下的数据变化 var real_vm = new Vue({ el:"real_info", d

不念不忘少年蓝@/ 2022年02月26日 18:46/ 0 赞/ 528 阅读

相关 vue 监听屏幕变化

1、防抖 npm install lodash.debounce -save-dev 2、在main.js写上如下代码 const windowResiz

偏执的太偏执、/ 2021年10月19日 07:54/ 0 赞/ 510 阅读

相关 vue（uniapp)子组件如何监听数据变化（数据变化后执行方法）

适用场景是父组件 <template> <view> <cylindrical :haveTask="totals"></cyl

墨蓝/ 2021年07月25日 12:37/ 0 赞/ 2959 阅读