解决vue侦听器watch,调用this时出现undefined的问题

watch侦听器中，我们要将新的值赋给this.a出错

watch: { value: (newV, oldV) => { this.a = newV; }}

这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为：

watch: { value: function(newV, oldV) { this.a = newV; }}

如下图:

看考链接：https://cn.vuejs.org/v2/api/#watch

PS：好吧，虽然问题可以解决，但是具体为什么不能写成箭头函数，讲实话，我现在也不懂，知道原理的可以给我评论，非常感谢。

来自yyf994的评论解答：

var app = new Vue({ el: ’#app’, data: { a: 1 }, watch: { a:()=> { console.log(this) } }, methods: { onClick() { this.a++; } } })

在babel 编译后是这样子的

'use strict'; var _this = void 0; var app = new Vue({ el: ’#app’, data: { a: 1 }, watch: { a: function a() { console.log(_this); } }, methods: { onClick: function onClick() { this.a++; } }});

因为箭头函数 的 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

补充知识：vue watch用法和没反应的原因 =>看看下面是不是还有一个watch

我就废话不多说了，大家还是直接看代码吧~

watch: { stop: function(newVal, old){ //非josn用法 console.log(newVal) }, ’form.fdnDct’: function(newVal, old){ //josn用法 console.log(newVal) }, } //这也是一种用法 watch: { ’browse_integral_info.buy’:’RMB’, //购买积分转化成人民币 ’browse_integral_info.give’:’GIVE’, //完成邀请浏览任务赠送 ’bargain_integral_info.give’:’BARGAINGIVE’, deep:true, }, methods: { RMB: function(){ this.RMBs = this.browse_integral_info.buy/100 }, },

以上这篇解决vue侦听器watch,调用this时出现undefined的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。