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

 更新时间:2020年10月30日 11:38:35   作者:犹有傲霜枝  
这篇文章主要介绍了解决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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue在H5 项目中使用融云进行实时个人单聊通讯

    Vue在H5 项目中使用融云进行实时个人单聊通讯

    这篇文章主要介绍了Vue在H5 项目中使用融云进行实时个人单聊通讯,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue electron零基础使用教程

    Vue electron零基础使用教程

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue 自定义icon图标的步骤

    vue 自定义icon图标的步骤

    这篇文章主要介绍了vue 自定义icon的图标的步骤,文中大概给大家分为两步骤,通过实例图文相结合给大家介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • vant之van-list的使用及踩坑记录

    vant之van-list的使用及踩坑记录

    这篇文章主要介绍了vant之van-list的使用及踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 如何使用Vue+Element做个个人中心

    如何使用Vue+Element做个个人中心

    我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue 自定义提示框(Toast)组件的实现代码

    vue 自定义提示框(Toast)组件的实现代码

    这篇文章主要介绍了vue 自定义提示框(Toast)组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 快速修改antd vue单个组件的默认样式

    快速修改antd vue单个组件的默认样式

    这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式,具有很好的参考价值,希望对大家有所帮助。
    2022-08-08
  • vue如何实现在线编辑excel

    vue如何实现在线编辑excel

    这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 中 get / delete 传递数组参数方法

    vue 中 get / delete 传递数组参数方法

    这篇文章主要介绍了vue 中 get / delete 传递数组参数方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论