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


Posted in Javascript onOctober 30, 2020

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

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

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

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

如下图:

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

看考链接: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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
js中的this关键字详解
Sep 25 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
You might like
php动态生成函数示例
2014/03/21 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
原生js生成图片验证码
2020/10/11 Javascript
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
投标服务承诺书
2014/05/28 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
语文复习计划
2015/01/19 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers