解决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 相关文章推荐
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
js表格分页实现代码
Sep 18 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jQuery中的select操作详解
Nov 29 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php木马webshell扫描器代码
2012/01/25 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
JS动画效果代码3
2008/04/03 Javascript
web前端开发也需要日志
2010/12/09 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python实现石头剪刀布程序
2021/01/20 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
计算机专业大学生的自我评价
2013/11/14 职场文书
无故旷工检讨书
2014/01/26 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
从事会计工作年限证明
2015/06/23 职场文书