解决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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
tsconfig.json配置详解
May 17 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
一个好用的分页函数
2006/11/16 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
php实现生成验证码实例分享
2016/04/10 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
详解supervisor使用教程
2017/11/21 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python Tkinter的图片刷新实例
2019/06/14 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
介绍一下write命令
2012/09/24 面试题
2015年宣传部工作总结范文
2015/03/31 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
第一节英语课开场白
2015/06/01 职场文书
预备党员群众意见
2015/06/01 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技