watch侦听器中,我们要将新的值赋给this.a出错
watch: {
value: (newV, oldV) => {
this.a = newV;
}
}
watch: {
value: (newV, oldV) => {
this.a = newV;
}
}这里报错undefined,这里错误的原因是不能写成箭头函数。写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为:
watch: {
value: function(newV, oldV) {
this.a = newV;
}
}
watch: {
value: function(newV, oldV) {
this.a = newV;
}
}如下图:看考链接:https://cn.vuejs.org/v2/api/#watchhttps://cn.vuejs.org/v2/api/#watchPS:好吧,虽然问题可以解决,但是具体为什么不能写成箭头函数,讲实话,我现在也不懂,知道原理的可以给我评论,非常感谢。来自yyf994的评论解答:来自yyf994的评论解答:来自yyf994的评论解答:
var app = new Vue({

el: '#app',

data: {

a: 1

},


watch: {

a:()=> {

console.log(this)

}

},


methods: {

onClick() {

this.a++;

}

}

})
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++;
}
}
});
"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补充知识:补充知识: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

},
},

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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考。