vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"
2018-04-20 19:17
1166 查看
首先确认 watch是一个对象,一定要当成对象来用。 对象就有键,有值。
键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
值也可以是函数名:不过这个函数名要用单引号来包裹。
第三种情况厉害了。 值是包括选项的对象:选项包括有三个。
1、第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
2、第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
3、第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数
具体的用法可以直接看下面的示例,简单直接
一个报错的问题处理:Error in callback for watcher "checkList": "TypeError: Cannot read property
解决方法:handler:(val,oldVal)=>{} 这样会报错,箭头函数导致this指向出错,改成handler:function(val,oldVal){}这样就好了
上面那样写会报错,改成下面这样就可以了,不要使用箭头函数
键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
值也可以是函数名:不过这个函数名要用单引号来包裹。
第三种情况厉害了。 值是包括选项的对象:选项包括有三个。
1、第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
2、第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
3、第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数
var vm = new Vue({ data: { a: 1, b: 2 }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 选项的对象 c: { handler: function (val, oldVal) { /* ... */ }, deep: true, immediate: true } } })
具体的用法可以直接看下面的示例,简单直接
<div id="app"> <input type="text" v-model:value="childrens.name" /> <input type="text" v-model:value="lastName" /> </div> <script type="text/javascript"> var vm = new Vue( { el: '#app', data: { childrens: { name: '小强', age: 20, sex: '男' }, tdArray:["1","2"], lastName:"张三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//对象内部的属性监听,也叫深度监听 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//键路径必须加上引号 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model绑定数据时使用的数据变化监测 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主动调用$watch方法来进行数据监测</span> </script> </body>
一个报错的问题处理:Error in callback for watcher "checkList": "TypeError: Cannot read property
解决方法:handler:(val,oldVal)=>{} 这样会报错,箭头函数导致this指向出错,改成handler:function(val,oldVal){}这样就好了
watch:{ checkList:{ handler:(oldValue,newValue) => { let _sum = 0 this.orderData.forEach(item => { if(this.checkList[item.order_id]){ _sum += item.service_price } }) this.sum = _sum }, deep:true } },
上面那样写会报错,改成下面这样就可以了,不要使用箭头函数
watch:{ checkList:{ handler:function(oldValue,newValue){ let _sum = 0 this.orderData.forEach(item => { if(this.checkList[item.order_id]){ _sum += item.service_price } }) this.sum = _sum }, deep:true } },
相关文章推荐
- 批处理之 正确使用for语句 以及!errorlevel!、%errorlevel% 与 DelayedExpansion用法详解
- "malloc: * error for object 0x17415d0c0: Invalid pointer dequeued from free list * set a breakpoint in malloc_error_break to debug";
- Exception in thread "Timer-0" java.lang.SecurityException: SHA1 digest error for javax/mail/internet/AddressException.class
- Error in startup script: value for " " missing
- gyp verb check python checking for Python executable "python2" in the PATH
- 升级xenserver后存储报错:Error in Metadata volume operation for SR的处理方法
- java.sql.SQLException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for
- [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function
- ORA-01591: lock held by in-doubt distributed transaction 以及分布式事务处理总结
- C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据)
- Unparsed aapt error(s)! Check the console for output"
- Error处理:Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack tra
- List Set Map以及子接口用法总结(转)
- Error setting value Method "setAge" failed for object ..Ljava.lang.String 错误总结
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- 升级xenserver后存储报错:Error in Metadata volume operation for SR的处理方法
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use
- shell for in 用法总结
- Error处理:Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack tra
- ORA-01591: lock held by in-doubt distributed transaction 以及分布式事务处理总结