首先确认 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. 【转载】Web开发技术发展历史-版本2

    原文在这里. Web开发的发展史 导读:Arunr 把过去 15 年以来,Web开发从最初的纯 HTML 到 CGI.PHP\JSP\ASP.Ajax.Rails.NodeJS 这个过程简要地进行了介 ...

  2. 【hdoj_1398】SquareCoins(母函数)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1398 此题采用母函数的知识求解,套用母函数模板即可: http://blog.csdn.net/ten_s ...

  3. 【JBPM4】判断节点decision 方法1

    JPDL <?xml version="1.0" encoding="UTF-8"?> <process key="decision ...

  4. 风情万种awk

    awk是基于列的文本处理工具,所有的文件都是由单词和各种空白字符组成.这里"空白字符"包括空格.tab以及连续的空格和tab,每个非空白的部分叫做"域",从左到 ...

  5. Eclipse Qt开发环境的建立

    1.下载Eclipse目前Eclipse+CDT已经可以集成下载了,好像优化过了,速度还比较快.下载的地址是:http://www.eclipse.org/downloads/,选择“Eclipse ...

  6. python 多网站采集,解决编码问题

    import chardet def get_charset(str): return chardet.detect(str)['encoding'] html = '' # bytes 字节串 ch ...

  7. 在浏览器中输入url地址 -> 显示主页的过程

    -来自<图解HTTP> 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么.仔细思 ...

  8. LCA算法笔记

    LCA,最近公共祖先,实现有多种不同的方法,在树上的问题中有着广泛的应用,比如说树上的最短路之类. LCA的实现方法有很多,比如RMQ.树链剖分等. 今天来讲其中实现较为简单的三种算法: RMQ+时间 ...

  9. scrapy抓取拉勾网职位信息(四)——对字段进行提取

    上一篇中已经分析了详情页的url规则,并且对items.py文件进行了编写,定义了我们需要提取的字段,本篇将具体的items字段提取出来 这里主要是涉及到选择器的一些用法,如果不是很熟,可以参考:sc ...

  10. 牛刀小试之Django二

    model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...