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

  键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量。

  值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

  值也可以是函数名:不过这个函数名要用单引号来包裹。

  第三种情况厉害了。 值是包括选项的对象:选项包括有三个。

  1、第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。

  2、第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)

  3、第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数

var vm = new Vue({
data: {
a: ,
b:
},
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: ,
sex: '男'
},
tdArray:["",""],
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 =
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 =
this.orderData.forEach(item => {
if(this.checkList[item.order_id]){
_sum += item.service_price
}
})
this.sum = _sum
},
deep:true
}
},

vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"的更多相关文章

  1. eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...”

    eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context ...

  2. vue中的main.js打开直接报错问题解决

    安装好后也是报这样的错,是因为WebStorm默认使用的是ES5的语法,改成ES6就可以了.   解决方案:    

  3. IntelliJ中Git突然不能用,报错 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)

    记录一个昨天碰到的问题以及解决方法,希望对碰到一样问题的你有用! 昨天升级了一下Mac OS,重启后再打开IntelliJ,突然Git就不能用了,报了下面这样的错: 开始以为是不是Git出了问题,打开 ...

  4. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  5. 在运行vue项目时,执行npm install报错小记

    在运行vue项目时,执行npm install 报错,导致后续的执行报各种错误,根据报错,尝试了网上的各种办法,最后发现时网络问题下载失败导致,解决办法: 安装cnpm==>npm instal ...

  6. IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式

    转载请注明来源:四个空格 » IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式: 环境 ideaIU-2018.3.4.win: 错误提示: Could no ...

  7. 【转载】访问IIS中网站出现 403.14 - Forbidden报错信息

    将网站发布后部署到IIS后,配置完应用程序池以及相关设置项后,在浏览器中访问设置好的网站,出现403.14 - Forbidden的错误信息,从错误信息的提示来看,应该是IIS服务器此网站目录的内容被 ...

  8. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  9. idea报错。Error:Failed to load project configuration: cannot parse xml file E:\project\.idea\workspace.xml: Error on line 1: 前言中不允许有内容。

    因为电脑卡死强制重启电脑后打开idea,进行junit单元测试报错: idea报错.Error:Failed to load project configuration: cannot parse x ...

随机推荐

  1. Python 面向对象的三大特性

    面向对象的三大特性:继承,封装,多态 什么时候用封装: 同一种功能的时候, 譬如:把一部分数据或方法,封装到同一个类的中 PS:在构造方法中,原始数据中....

  2. 【hdoj_2391】FilthyRich

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2391 题目大意:给定一个矩阵,从左上角第一个元素开始到右下最后一个元素,寻找一条路线,使得路线经过的矩阵元 ...

  3. python模块之HTMLParser

    HTMLParser是python用来解析html的模块.它可以分析出html里面的标签.数据等等,是一种处理html的简便途径. HTMLParser采用的是一种事件驱动的模式,当HTMLParse ...

  4. 解决 .htaccess 导致的403禁止访问

    如果启用了mod_rewrite, 那么Options就一定要启用FollowSymLinks或者SymLinksifOwnerMatch, 否则会出现Fobidden页面禁止访问的错误. 于是把 O ...

  5. Matrix Zigzag Traversal(LintCode)

    Matrix Zigzag Traversal Given a matrix of m x n elements (m rows, ncolumns), return all elements of ...

  6. 每日一刷(2018多校水题+2016icpc水题)

    11.9 线段树 http://acm.hdu.edu.cn/showproblem.php?pid=6315 求逆序对个数 http://acm.hdu.edu.cn/showproblem.php ...

  7. 洛谷——P2239 螺旋矩阵

    P2239 螺旋矩阵 题目描述 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵中 ...

  8. HDU 6162 Ch’s gift (树剖 + 离线线段树)

    Ch’s gift Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  9. 【BZOJ 2803】【POI 2012】Prefixuffix

    http://www.lydsy.com/JudgeOnline/problem.php?id=2803 核心思想是利用单调性. 因为长度为L的前缀和后缀循环同构是AB和BA的形式,我们设\(f(i) ...

  10. 雅礼集训DAY 6 T1 xmasdag

    感谢gryz的mly大好人再次给我提供了题目和数据. 和昨晚那个题几乎一样,都是x^n最后转化成第二类斯特林数*阶乘*Σ(和路径长度有关的组合数),而因为组合数是可以利用Pascal公式实现O(1)递 ...