vue中watch的用法总结以及报错处理Error in callback for watcher checkList

　　首先确认 watch是一个对象，一定要当成对象来用。对象就有键，有值。

　　键：就是你要监控的那个家伙，比如说$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 = 0this.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 = 0this.orderData.forEach(item => {if(this.checkList[item.order_id]){_sum += item.service_price}})this.sum = _sum},deep:true}},

转载于:https://www.cnblogs.com/goloving/p/8893073.html

vue中watch的用法总结以及报错处理Error in callback for watcher checkList相关推荐

解决使用下拉组件报错：Error in callback for watcher “focusing“: “TypeError: Cannot set property className......
直接先贴报错图原因:本人在点击下拉菜单的报错,但是功能正常解决:个人手贱把包裹下拉菜单这四个字的span标签给删了(也可以是div,但是必须有标签包裹)
解决vue中路由跳转同一个路径报错
在vue项目中,如果使用$router.push跳转到一个相同的路由会报错如何解决 vue-router在3.1.0版本之后,push和replace方法会返回一个promise对象,如果跳转到相同的 ...
【原创】vue中使用CKEditor5引入插件ckeditor-duplicated-modules报错处理
在vue中使用了ckeditor5后,收到如下图的反馈: 起初以为是小问题,像其他富文本一样加几个属性参数就有了,但是我发现我错了,错的离谱.那些参数加上去没有任何效果,后来查找下才知道是要下载插件. ...
解决Vue中Object.assign清空数据的报错
想清空Vue中的data数据报错也许是没有改变this指向的原因可以试着用call等方便改变this指向例如 Object.assign(this.$data, this.$options.data. ...
vue中base64图片展示提示图片报错：GET data:image/png；base64,undefined net::ERR_INVALID_URL
我把后端和前端都部署到了云服务器上.部署后端后,通过本地启动的前端连接服务器上的后端后,可以正常访问.但是通过部署在服务器上的前端项目访问页面时有报错,可能图片的相关报错. 造成这样的原因 <i ...
vue中更换标签页.ico图标报错路径找不到图片
需求如下 1.首先需要一张图片 2.在index.html页面 <link rel="shortcut icon" type="image/x-icon" ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中通过arr.length获取数组长度报错：Error in render: “TypeError: Cannot read property ‘length‘ of undefined“
刚开始是通过arr.length获取数组长度的! 结果控制台报错: Error in render: "TypeError: Cannot read property 'length' of ...

vue中watch的用法总结以及报错处理Error in callback for watcher checkList

vue中watch的用法总结以及报错处理Error in callback for watcher checkList相关推荐

最新文章

热门文章