vue中,watch里,this为undefined的两种解决办法

提示:vue中,watch里,this为undefined的两种解决办法

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、问题
  • 二、方法1——使用function函数代替箭头函数()=>{}
  • 三、方法2——使用that
  • 总结

前言

‌‌‌‌‌尽量使用方法1——使用function函数代替箭头函数()=>{}
【使用that方式,父组件中循环生成多个子组件时,有且只有最后一个子组件的watch对象生效问题】

一、问题

打印watch中this是undefined
在这里插入图片描述
1、selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>export default {name: 'preview',props:{type:{type:String,default:'car',}},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:()=>{console.log(this,'-------------')},deep:true}},}</script><style scoped></style>

2、home.vue组件

<template><div class="home_box"><el-button @click="changeType('car')">car</el-button><el-button @click="changeType('animal')">animal</el-button><selectCom :type="type"></selectCom></div>
</template><script>import selectCom from './preview/selectCom';export default {name: 'Hmoe',components:{selectCom},data () {return {type:'car',}},methods: {changeType(type){this.type = type;},}}</script><style scoped></style>

二、方法1——使用function函数代替箭头函数()=>{}

打印watch中that(即this)
在这里插入图片描述
在这里插入图片描述
selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>export default {name: 'preview',props:{type:{type:String,default:'car',}},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:function(){console.log(this,'-------------');},deep:true}},}</script><style scoped></style>

三、方法2——使用that

打印watch中that(即this)
在这里插入图片描述
在这里插入图片描述
selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>let that;export default {name: 'preview',props:{type:{type:String,default:'car',}},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:()=>{console.log(that,'-------------');},deep:true}},created(){that = this;},}</script><style scoped></style>

总结

踩坑路漫漫长@~@

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

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

相关文章

uniapp移动端图片比较器组件,仿英伟达官网rtx光追图片比较器功能

组件下载地址&#xff1a;https://ext.dcloud.net.cn/plugin?id22609 已测试h5和微信小程序&#xff0c;理论支持全平台 亮点&#xff1a; 简单易用 使用js计算而不是resize属性&#xff0c;定制化程度更高 组件挂在后可播放指示线动画&#xff0c;提示用户可以拖拽比较图片…

SDL3 游戏开发 Windows 环境搭建

SDL3 游戏开发 Windows 环境搭建 一、准备工作1.1 必备工具与库安装1.1.1 CMake1.1.2 MinGW-w641.1.3 Ninja1.1.4 Git1.1.5 SDL3 及扩展库1.1.6 VSCode 及插件 二、配置VSCode项目并验证环境2.1 创建测试源文件2.2 编写CMakeLists.txt文件和CMakePresets.json2.2.1 使用VSCode的…

【sql靶场】第13、14、17关-post提交报错注入保姆级教程

目录 【sql靶场】第13、14、17关-post提交报错注入保姆级教程 1.知识回顾 1.报错注入深解 2.报错注入格式 3.使用的函数 4.URL 5.核心组成部分 6.数据编码规范 7.请求方法 2.第十三关 1.测试闭合 2.列数测试 3.测试回显 4.爆出数据库名 5.爆出表名 6.爆出字段 …

esxi,vcenter6.0安装指导

前言 esxi6.0安装和esxi6.7步骤基本一样&#xff0c;可参考vmware esxi vcenter6.7安装教程&#xff08;dell&#xff09; 环境依赖以及安装包 esxi6.0安装包vcenter6.0安装不同于6.7&#xff0c;6.5通过导入ova模版安装&#xff0c;需要安装在windows server 2008或者windo…

BigFoot Decursive lua

BigFoot Decursive lua 一键驱散脚本 国际化 ogg语音提示 初始化

2024山东大学计算机复试上机真题

2024山东大学计算机复试上机真题 2024山东大学计算机复试机试真题 历年山东大学计算机复试上机真题 历年山东大学计算机复试机试真题 在线评测&#xff1a;传动门&#xff1a;pgcode.cn 最长递减子序列 题目描述 输入数字 n&#xff0c;和 n 个整数&#xff0c;输出该数字…

【AI News | 20250316】每日AI进展

AI Repos 1、ReActMCP 将网络搜索能力集成到AI助手中的一个MCP服务&#xff1a;ReActMCP Web Search&#xff0c;相当于给AI装了个搜索引擎&#xff0c;可以实时查找最新的内容。它基于Exa API执行基本和高级网络搜索&#xff0c;高级搜索比如限制搜索的网站范围、指定日期范围…

【大模型实战篇】使用GPTQ量化QwQ-32B微调后的推理模型

1. 量化背景 之所以做量化&#xff0c;就是希望在现有的硬件条件下&#xff0c;提升性能。量化能将模型权重从高精度&#xff08;如FP32&#xff09;转换为低精度&#xff08;如INT8/FP16&#xff09;&#xff0c;内存占用可减少50%~75%。低精度运算&#xff08;如INT8&#xf…

Unity 笔记:在EditorWindow中绘制 Sorting Layer

在Unity开发过程中&#xff0c;可能会对旧资源进行批量修改&#xff0c;一个个手动修改费人费事&#xff0c;所以催生出了一堆批量工具。 分享一下在此过程中绘制 Sorting Layer 面板的代码脚本。 示意图&#xff1a; 在 EditorGUI 和 EditorGUILayer 中内置了 SortingLayerF…

idea更新git代码报错No Git Roots

idea更新git代码报错&#xff1a; No Git Roots None of configured Git roots are under Git. The configured directory must have ".git directory in it.但是本地项目里是存在.git文件的&#xff0c;就是突然间不能更新代码了 然后尝试重新拉新项目代码提示: Git i…

失败的面试经历(ʘ̥∧ʘ̥)

一.面向对象的三大特性 1.封装&#xff1a;将对象内部的属性私有化&#xff0c;外部对象不能够直接访问&#xff0c;但是可以提供一些可以使外部对象操作内部属性的方法。 2.继承&#xff1a;类与类之间会有一些相似之处&#xff0c;但也会有一些异处&#xff0c;使得他们与众…

qt加载VeloView工程

接上一篇点云软件配置与编译&#xff0c;使用qt加载需要先完成编译。编译完成后到编译目录下lidarview-superbuild\common-superbuild\lidarview\build 找到CmakeCache.txt&#xff0c;如下是我的编译目录。 使用QT6.5.3加载了CmakeCache.txt&#xff0c;QT5.14还加载不了cmake…

Windows Qt动态监测系统分辨率及缩放比变化

前言 Windows 显示设置中&#xff0c;可以修改缩放比&#xff0c;所有界面和文字会同比例放大或缩小&#xff0c;在开发桌面程序时&#xff0c; 实时监测Qt应用程序在不同缩放比例下的表现&#xff0c;可以及时调整程序界面以适应不同显示屏幕的需求。 正文 本文通过Qt相关…

CVE-2017-5645(使用 docker 搭建)

介绍: 是一个与 Apache Log4j2 相关的安全漏洞,属于远程代码执行,它可能允许攻击者通过构造恶意的日志信息 在目标系统上执行任意代码 Log4j2 介绍 Log4j2 是 Apache 的一个日志记录工具,属于 Java 应用的日志框架,它是 Log4j 的升级版,性能更好,功能更多.它被广泛的适用于 J…

交互式可视化进阶(Plotly Dash构建疫情仪表盘)

这里写目录标题 交互式可视化进阶(Plotly Dash构建疫情仪表盘)1. 引言2. 项目背景与意义3. 数据集生成与介绍4. GPU加速在数据处理中的应用5. 交互式仪表盘构建与Plotly Dash6. PyQt GUI集成与美化7. 工程整体架构8. 部分代码实现9. 代码自查与BUG排查10. 总结与展望交互式可…

RabbitMQ(补档)

RabbitMQ 是一个开源的消息队列软件&#xff08;有时也被称为消息代理&#xff09;&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。它主要用于应用程序之间&#xff0c;或者软件组件之间的消息通信。通过使用 RabbitMQ&#xff0c;可以实现异步的、可靠的…

平方矩阵问题

Ⅰ 回字形二维数组 #include <iostream> #include <iomanip> using namespace std; int main(){int n;while(cin>>n,n){for(int i0; i<n;i){for(int j0; j<n; j){int upi, downn-i1, leftj, rightn-j1;cout<<min(min(up,down),min(left,right)…

电子电气架构 --- 智能座舱和车载基础软件简介

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 人生是一场骗局,最大的任务根本不是什么买车买房,也不是及时行乐,这就是欲望,不是理想,是把自己对生命的希望寄托在外物上,正确的做法应该是内…

Qt 通过MSVC编译运行项目

第一步下载Qt 把Qt能选的插件都选上&#xff0c;有的是连接数据库必须得插件&#xff0c;有的是做图表必须得插件&#xff0c;有的是运行MSVC必须得插件&#xff0c;能选尽量都选上。 第二步安装VS2017&#xff0c;当然我们安装2017的目的主要是用C的编译器&#xff0c;这里提…