首页 >> js开发 >> js解决vue侦听器watch,调用this时出现undefined的问题js大全
js解决vue侦听器watch,调用this时出现undefined的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考。
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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考。