一键生成小程序_解决vue侦听器watch,调用this时呈现

发布时间:2021-01-05 09:54 作者:jianzhan

摘要: 处理vue侦听器watch,启用this时出現undefined的难题 本文关键详细介绍掌握决vue侦听器watch,启用this时出現undefined的难题,具备非常好的参照这儿出错undefined,这儿不正确的缘故不是能写

解决vue侦听器watch,调用this时出现undefined的问题       这篇文章主要介绍了解决vue侦听器watch,调用this时出现undefined的问题,具有很好的参考

这里报错undefined,这里错误的原因是不能写成箭头函数。写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为:

watch: {
 value: function(newV, oldV) {
 this.a = newV;
}

如下图:

看考链接:

凡科抠图:好吧,虽然问题可以解决,但是具体为什么不能写成箭头函数,讲实话,我现在也不懂,知道原理的可以给我评论,非常感谢。

来自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: {
 '.buy':'RMB', //购买积分转化成人民币
 '.give':'GIVE', //完成邀请浏览任务赠送
 '.give':'BARGAINGIVE',
 deep:true,
 methods: {
 RMB: function(){ 
 this.RMBs = .buy/100

以上这篇解决vue侦听器watch,调用this时出现undefined的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


  • 共享自助洗衣?是个坑?

    【它是再次发的,

  • 自助建站系统哪个好用?

    最开始看网站布局,其次看见你务必什么功效以及它的特点,再聊是看未来销售市场市场前景这种~自己网站有wordpress(倘若你感觉它算自助式式的话)。它是认同地好。作出口出口外贸

  • 我打算做网站,有推荐吗

    这仅仅店家拉客的营销手段罢了。 自助式建网站服务平台得话,假如你沒有技术性功底,对网络服务器运维管理不太掌握得话,我本人强烈推荐你试一下 臻网云建网站 ,价钱在网

  • 定制型网站建设需要多少

    订制型企业网站建设必须是多少钱?定制型网站务必多少钱钱?企业在建设网站时,理应选择模板基建项目网站,还是定制企业网站呢?基建项目网站务必多少钱钱呢?下面网编让你表述公

  • 建设一个网站的成本多少

    关键是早期申请注册网站域名,租网络服务器这些

    很多有知乎问答网民明确提出:基本建设一个基本的企业公司企业网站建设成本费大约是多少钱?能看看下列自己共享的一些內容