解决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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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
laravel 事件/监听器实例代码
2019/04/12 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
webpack4.x开发环境配置详解
2018/08/04 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python中包的用法及安装
2020/02/11 Python
Python 存取npy格式数据实例
2020/07/01 Python
django rest framework使用django-filter用法
2020/07/15 Python
Pycharm中如何关掉python console
2020/10/27 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
民事调解书范文
2015/05/20 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Python函数式编程中itertools模块详解
2021/09/15 Python