解决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实现的网页颜色代码表全集
Jul 17 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
浅析javascript 定时器
Dec 23 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
通过JS判断网页是否为手机打开
Oct 28 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 db类库进行数据库操作
2009/03/19 PHP
php如何连接sql server
2015/10/16 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
sails框架的学习指南
2014/12/22 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python3字符串学习教程
2015/08/20 Python
Python编写登陆接口的方法
2017/07/10 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python求质数列表的例子
2019/11/24 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python自动化发送邮件实例讲解
2021/01/04 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
应届生自我鉴定
2013/12/11 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
委托公证书范本
2014/04/03 职场文书
水利水电专业自荐信
2014/07/08 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
领导欢送会主持词
2015/07/06 职场文书
运动会通讯稿200字
2015/07/20 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
Python中requests库的用法详解
2022/06/05 Python