解决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 相关文章推荐
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
浅谈React高阶组件
Mar 28 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
django的登录注册系统的示例代码
2018/05/14 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
编辑个人求职信范文
2013/09/21 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
教师工作表现自我评价
2015/03/05 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
详解Vue slot插槽
2021/11/20 Vue.js