【vue】watch监听取不到this指向的数?

今天同事问我,watch里this指向的数值,别的地方却可以打印出来。工具也能看到数值,但打印出来却是undifined,先看看代码:

懒得打字了直接上截图吧

ps:

在Vue组件中,如果你在watch选项中访问this指向的数据,有可能无法获取到数据,因为this的指向在箭头函数中不会指向Vue实例。

解决方法:

  1. 使用常规函数而不是箭头函数来定义watch中的回调。
 
javascriptwatch: {
apiData: function(newVal, oldVal) {
// 在这里,this指向Vue实例,可以访问this.apiData
}
}
  1. 如果你使用箭头函数,并且需要访问Vue实例的方法或数据,可以在data中定义一个变量来存储this的引用。
 
javascriptdata() {
return {
vm: this // 存储Vue实例的引用
};
},
watch: {
apiData: (newVal, oldVal) => {
// 使用 this.vm 来访问Vue实例的数据和方法
}
}
  1. 使用watch的第三个参数immediate,设置为true可以让watch立即触发。
 
javascriptwatch: {
apiData: {
handler: (newVal, oldVal) => {
// 处理数据变化
},
immediate: true // 组件创建后立即触发一次
}
}

确保你的watch监听的数据在组件创建之前已经被定义,否则可能无法触发watch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【精选】发布应用到应用商店的基本介绍

摘要 本文旨在介绍如何在各大应用商店发布应用,包括市场选择、准备材料、上架步骤以及常见被拒原因及解决方法。通过详细的步骤和经验分享,帮助开发者顺利将应用推向市场。 引言 随着移动应用市场的不断发展,越来越多的开发者希望将他们的…

2024年能源环境、材料科学与人工智能国际会议(ICEEMSAI2024)

2024年能源环境、材料科学与人工智能国际会议(ICEEMSAI2024) 会议简介 2024国际能源环境、材料科学和人工智能大会(ICEEMSAI 2024)主要围绕能源环境、物质科学和人工智慧等研究领域,旨在吸引能源环境、先进材料和人工智能专家学者、科技人员…

跨域问题一文解决

📝个人主页:五敷有你 🔥系列专栏:Vue ⛺️稳中求进,晒太阳 一、为什么会出现跨域的问题? 是浏览器的同源策略,跨域也是因为浏览器这个机制引起的,这个机制的存在还是在于安全…

C语言指针易混问题

1. 在此函数传参过程中,虽然p是指针,但此处传递等价于值传递而非地址传递,所以函数中对变量的改变不改变主函数中原有变量的值 2. 能修改的是变量,但常量不能被修改,否则会出现段错误,下图为错误示范

机器学习中的激活函数

激活函数存在的意义: 激活函数决定了某个神经元是否被激活,当这个神经元接收到的信息是有用或无用的时候,激活函数决定了对这个神经元接收到的信息是留下还是抛弃。如果不加激活函数,神经元仅仅做线性变换,那么该神经网…

产品经理应具备哪些素质呢?

目录 简介 产品经理素质 CSDN学院 作者简介 简介 刚毕业想做产品经理,或者想转行产品经理,该怎么入手呢? 很多人对产品经理有这样一个认知:就是空有一个经理的头衔,却没有任何实质的权利。 其实这是有误区的&am…

日程安排组件DHTMLX Scheduler v7.0新版亮点 - 拥有多种全新的主题

DHTMLX Scheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天、周、月三个种视图显示。 备受关注的DHTMLX Scheduler 7.0版本日前正式发布了,如…

小程序项目思路分享爬虫

小程序项目思路分享爬虫 具体需求: 有这几个就行,门店名称门店地址门店类型,再加上省、市、县/区门店名称:storeName 门店地址:storeAddress 程序运行: honor_spider获取经纬度信息。 经纬度——>详…

Ubuntu配置VScode的C++环境

在Ubuntu系统下配置C环境,并运行helloworld 1. 下载VScode 我这里使用的是星火应用商店,在商店里面可以直接下载安装 http://spark-app.store/ 2.创建文件夹 3.启动VScode并打开该文件夹 4.安装以下几个扩展 PS:Clang这个插件别安装&…

【电路笔记】-逻辑或非门

逻辑或非门 文章目录 逻辑或非门1、概述2、晶体管逻辑或非门3、数字逻辑或非门类型4、通用或非门逻辑或非门是数字逻辑或门与反相器或非门串联的组合。 1、概述 或非(Not-OR)门的输出通常为逻辑电平“1”,并且仅当其任何输入处于逻辑电平“1”时才变为“低”至逻辑电平“0”…

OpenHarmony应用开发引入开源C/C++库---之Har包里的NDK

Har 包 HAR(Harmony Archive)是静态共享包,可以包含代码、C 库、资源和配置文件。通过 HAR 可以实现多个模块或多个工程共享 ArkUI 组件、资源等相关代码。HAR 不同于 HAP,不能独立安装运行在设备上,只能作为应用模块…

力扣HOT100 - 73. 矩阵置零

解题思路: 题目要求使用原地算法 在原地算法中,输入数据通常在内存中直接被修改,而不需要额外的辅助数据结构来存储中间结果。原地算法的一个常见应用是在数组或列表上进行操作,而不是创建新的数组或列表来存储结果。 class So…

【截至2023年底】语言模型的发展

什么是大语言模型LLM?ChatGPT、LLAMA各自有什么优势? from: https://www.youtube.com/watch?vt6qBKPubEEo github: https://github.com/Mooler0410/LLMsPracticalGuide 来自这篇survey,但据说还在更新,到…

数据结构——线性表(顺序存储结构)

语言:C语言软件:Visual Studio 2022笔记书籍:数据结构——用C语言描述如有错误,感谢指正。若有侵权请联系博主 一、线性表的逻辑结构 线性表是n个类型相同的数据元素的有限序列,对n>0,除第一元素无直接…

MySQL:关于数据库的一些练习题

文章目录 前面的内容已经把数据库的一些必要知识已经储备好了,因此下面就对于这些语句进行一些练习: 批量插入数据 insert into actor values (1, PENELOPE, GUINESS, 2006-02-15 12:34:33), (2, NICK, WAHLBERG, 2006-02-15 12:34:33);SQL202 找出所有…

学习R语言第二天

R语言可以做什么 1.数据分析 R语言如何使用 1. 请看我的操作方式 2. 如何获取当前路径 -- 获取当前路径 > getwd() [1] "E:/R/RWorkSpace/day01" -- 修改当前路径 > setwd(dir "E:/R") > getwd() [1] "E:/R" 3.查看当下数据值的信…

UT单元测试

Tips:在使用时一定要注意版本适配性问题 一、Mockito 1.1 Mock的使用 Mock 的中文译为仿制的,模拟的,虚假的。对于测试框架来说,即构造出一个模拟/虚假的对象,使我们的测试能顺利进行下去。 Mock 测试就是在测试过程…

【CVE-2023-38831】进行钓鱼攻击的研究

本文仅仅是对相关漏洞利用的学习记录,请各位合法合规食用! WinRAR是一款文件压缩器,该产品支持RAR、ZIP等格式文件的压缩和解压等。WinRAR在处理压缩包内同名的文件与文件夹时代码执行漏洞,攻击者构建由恶意文件与非恶意文件构成的特制压缩包文件,诱导受…

C# wpf 嵌入外部程序

WPF Hwnd窗口互操作系列 第一章 嵌入Hwnd窗口 第二章 嵌入WinForm控件 第三章 嵌入WPF控件 第四章 嵌入外部程序(本章) 第五章 底部嵌入HwndHost 文章目录 WPF Hwnd窗口互操作系列前言一、如何实现?1、定义属性2、进程嵌入(1&…

AugmentedReality之路-平面检测(5)

本文介绍通过AR检测水平平面和垂直平面,并将检测到的平面转化为Mesh 1、在首页添加功能入口 在首页添加一个按钮,命名为Start World Track 2、自定义ExecStartAREvent 创建ARSessionConfig并取名为ARSessionConfig_World 自定义ExecStartAREvent&…