【Vue】日常错误总结(持续更新)

日常遇到的小问题汇总, 内容小篇幅少的就全放这里了, 内容多的会在Vue专栏单独分享~

目录

【Q】 el-form-item值为 null 或 undefined显示““

【Q】dialog内组件数据刷新总是延迟慢一拍

问题背景描述

解决方案

代码简单模拟

JS

【Q】el-input 不能输入的解决办法

方法1:标签嵌套太深

方法2:使用了 template 作为 el-input 的父标签

方法3:v-model

【Q】npm ERR A complete log of this run can be found in: npm ERR

【Q】el-tabs表格右下角按钮被遮挡

【Q】this.$refs.xxx 报错undefined解决办法

【Q】this.$refs[‘form’].resetFields()

【Q】this.defParams = {...this.params}

【Q】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

【Q】数据还没获取就已渲染页面

【Q】页面跳转后没有重新请求接口

a、updated刷新组件内的方法更新数据

b、监听路由去请求方法更新数据

【Q】调用子组件提示this.$refs["xxxRef"].xx()  underfined

a、首次渲染不调用

b、加载完数据再请求

【Q】Error in callback for watcher "$route": "TypeError: this.$refs.xxxRef is undefined"


【Q】 el-form-item值为 null 或 undefined显示““

可以在 `el-form-item` 中使用表达式,使用 `v-if` 指令判断当前表单项的值是否为 null 或 undefined,如果为 null 或 undefined,就显示空字符串。

例如:

<template><el-form ref="form" :model="formData" :rules="formRules" label-position="left"><el-form-item label="姓名" :label-width="labelWidth"><el-input v-model="formData.name" clearable v-if="formData.name !== null && formData.name !== undefined"></el-input><span v-else>&nbsp;</span></el-form-item><el-form-item label="性别" :label-width="labelWidth"><el-select v-model="formData.gender" clearable v-if="formData.gender !== null && formData.gender !== undefined"><el-option label="男" value="male"></el-option><el-option label="女" value="female"></el-option></el-select><span v-else>&nbsp;</span></el-form-item><el-form-item label="年龄" :label-width="labelWidth"><el-input type="number" v-model.number="formData.age" clearable v-if="formData.age !== null && formData.age !== undefined"></el-input><span v-else>&nbsp;</span></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {name: null,gender: null,age: null},formRules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],gender: [{ required: true, message: '请选择性别', trigger: 'change' }],age: [{ required: true, message: '请输入年龄', trigger: 'blur' },{validator: (rule, value, callback) => {if (value < 0) {callback(new Error('年龄不能小于0岁'));} else {callback();}},trigger: 'blur'}]},labelWidth: '120px'};}
};
</script>

在上面的代码中,我们在每个表单项中使用 `v-if` 判断当前表单项的值是否为 null 或 undefined,如果为 null 或 undefined,则将当前表单项的值设置为空字符串。这样就可以将值为 null 或 undefined 的表单项显示为空。我们使用 `&nbsp;` 来占位,使表单外观更美观。

注意:如果在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式,那么应该将所有表达式放在一对花括号中。例如:

<el-form-item :label="'年龄:' + labelSuffix" :label-width="labelWidth" v-if="formData.age !== null && formData.age !== undefined"><el-input type="number" v-model.number="formData.age" clearable></el-input>
</el-form-item>
<span v-else>&nbsp;</span>

在上面的代码中,我们在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式,因此应该将它们放在一对花括号中。

【Q】dialog内组件数据刷新总是延迟慢一拍

问题背景描述

用dialog做了一个一个新增功能,有个多层复选框,关联一个文本域。
选中复选框时,文本域刷新,但是总是慢一拍。
:destroy-on-close="true", v-if, $nextTick,用个遍了,都不好使。
同样的功能在编辑页面就是正常的,区别仅仅是因为新增是dialog子页面,
由此入手排查问题,发现竟然是...

解决方案

代码简单模拟

源码不便展出,凑合看解决问题就好~

<el-dialog :destroy-on-close="true"  title="国服李白" :visible.sync="dialogEdit"><span>这是一段信息</span><flow-chart :dialogNodes="dialogNodes" :key="timer0"></flow-chart><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>

组件上添加 :key="timer1" data 中定义 timer0''
在获取数据成功后 将 timer0 赋值为 this.timer1 = new Date().getTime()

JS
const res = await ApiUserManage.execDiagram(param)if (res.success){this.timer0 = new Date().getTime()this.dialogNodes = res.result.nodes

【Q】el-input 不能输入的解决办法

输入框动态填充值,但是填充后不能编辑了,
就像是被禁止了一样, 就很无语...查了下资料, v-model填写了, 也没有templete标签嵌套最终方法一即可解决问题...

方法1:标签嵌套太深

如果标签嵌套太深,会导致无法获取到 DOM,这是我们需要 $forceUpdate() 强制刷新,才可获取<el-input type='text' v-model='value' @change='change()'></el-input>
data(){return {value:'',}
}
change(){this.$forceUpdate();  //强制刷新
}

方法2:使用了 template 作为 el-input 的父标签

这种情况需要在 template 中添加 slot-scope 属性,<template slot-scope="scope">

方法3:v-model

el-input 中没有 v-model

【Q】npm ERR A complete log of this run can be found in: npm ERR

总是提示这个错误,以为是nodejs版本v16太高的问题,换成v12后,还是不行...

npm i后总是提示这个

nnpm ERR! Unexpected token '.'  npm ERR! A complete log of this run can be found in: npm ERR!     C:\Users\admin\AppData\Local\npm-cache\_logs\2022-08-29T15_07_28_136Z-debug-0.log

后来发现管理员打开VSCode就好了...

【Q】el-tabs表格右下角按钮被遮挡

该列设置了 fixed="right",  去掉 fixed="right"即可

常规方法:  看下是否是下方组件margin设置过大

【Q】this.$refs.xxx 报错undefined解决办法

【Vue】this.$refs.xxx 报错undefined解决办法

【Q】this.$refs[‘form’].resetFields()

要想this.$refs[‘form’].resetFields()方法有效,必须配置el-form :model 属性和el-form-item中的prop属性才可以

this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,

【Q】this.defParams = {...this.params}

this.params=this.defParam;初始化默认参数, vue2会把内存地址也复制过去,当params里面的值修改后, this.defParams也会相应改动,所以要先复制一份再赋值给this.params

this.defParams = {...this.params}, 

这样它们之间的值才不会相互影响, 不过这在Vue3里面都已经解决了

【Q】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

改动了子组件中引用的父组件的变量,也就是props中的数据

中组件props中的数据只能单向流动,即只能从父组件通过组件的DOM属性attribute传递props给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props数据。

props:{cid:{type:String,},},methods: {//父组件刷新子组件数据1flush(cid){const params = {cid:cid};this.getData(params);},//父组件刷新子组件数据2, 这种情况就会出现上述问题flush(cid){this.cid= cid;const params = {cid:this.cid};this.getData(params);},

【Q】数据还没获取就已渲染页面

简单举例...
v-if="loading"
...data(){return{loading:false,}
}created(){ this.init();
}, methods: {init() {this.getList();},getList() {queryListData(this.params).then((res) => {if(res.code==='200'){...this.loading = true;}}).finally(() => {...});},
}

【Q】页面跳转后没有重新请求接口

aupdated刷新组件内的方法更新数据

简单举例...
ref="demoRef"
...created() {}, 
mounted() {},
updated() {this.init();
},methods: {init() {this.$refs["demoRef"].flush();}},
}

b监听路由去请求方法更新数据

简单举例...
ref="demoRef"
...created() {}, 
mounted() {},
updated() {},watch: {$route(a, b) {if (a.path != b.path) {this.init();}},//-----或-----$route(-) {this.init();},
},methods: {init() {this.detail();...}},
}

【Q】调用子组件提示this.$refs["xxxRef"].xx()  underfined

a首次渲染不调用

b加载完数据再请求

简单举例...
ref="demoRef"
...data() {return {loadingData:false,},
}
created() {this.init();
}, 
mounted() {},
updated() {if(loadingData){this.$refs["demoRef"].flush();}
},methods: {init() {queryListData(this.params).then((res) => {...this.loadingData= true;});}},
}

【Q】Error in callback for watcher "$route": "TypeError: this.$refs.xxxRef is undefined"

父页面监控路由变动时刷新子组件提示, 这里是同一个页面路由参数改变,

Error in callback for watcher "$route": "TypeError: this.$refs.tableOneRef is undefined"

困扰许久, this.nextTick(){}等等都不好使, 原因是在Vue中,当路由发生变化时,组件的实例会被销毁然后重新创建。因此,在路由切换后,组件的this上下文会发生改变。

当你监听路由变化时,如果在回调函数中使用了this关键字,它将指向新创建的组件实例,而不是之前的组件实例。这意味着你无法直接访问之前组件实例中的数据和方法。

为了解决这个问题,你可以在监听路由变化时,将需要保留的数据和方法保存到其他变量中,或者使用Vue提供的beforeRouteUpdate导航守卫来处理组件的更新逻辑。

beforeRouteUpdate(to, from, next) {// 保存需要保留的数据和方法const preservedData = this.data;const preservedMethod = this.method;// 执行路由变化前的逻辑// ...// 调用next()继续路由更新next();// 在路由更新后恢复数据和方法this.data = preservedData;this.method = preservedMethod;
}

依然不好使哈

这里说下最后的解决思路:

定义一个状态isReloadChild:true

监控路由变化时, 先false,  然后更改状态为true, 需要控制的组件v-if控制

简化代码如下

      this.isReloadChild = false;setTimeout(() => {this.isReloadChild = true;}, 0);

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

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

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

相关文章

IDEA 2023.3 start failed 启动失败修复

发现是 RestfulToolkit 插件有冲突导致的&#xff0c;删除插件后成功启动 open ~/Library/Application\ Support/JetBrains/IntelliJIdea2023.3/plugins参考&#xff1a;https://youtrack.jetbrains.com/issue/IDEA-340080/Critical-startup-error-after-upgrading-to-Intelli…

系统的安全性设计

要设计一个安全的系统&#xff0c;除了要了解一些前面讲到的常用的保护手段和技术措施外&#xff0c;还要对系统中可能出现的安全问题或存在的安全隐患有充分的认识&#xff0c;这样才能对系统的安全作有针对性的设计和强化&#xff0c;即“知己知彼&#xff0c;百战百胜”。 下…

12月11日作业

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

基于ssm服装定制系统源码和论文

idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 开发技术 ssm 基于ssm服装定制系统源码和论文751 1.1项目研究的背景 困扰管理层的许多问题当中,服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻…

【SpringBoot】从入门到精通的快速开发指南

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《SpringBoot》。&#x1f3af;&#x1f3af; &…

PDI/Kettle-9.2.0.0-R(对应jdk1.8)源码编译问题记录及源码结构简介

目录 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的&#x1f4d7;总体方向 &#x1f4da;第二章 代码结构初识基本结构&#x1f4d7;代码模块详情 ⁉️问题记录❓问题一&#xff1a;代码分支哪些是发布版本❗答&#xff1a;后缀-R的版本 ❓问题二&#xff1a;50…

怎么选择合适的3ds Max云渲染农场?

3ds Max 用户日常面临的一个共同挑战便是漫长的渲染周期。作为一个强大的三维建模和渲染软件&#xff0c;3ds Max 势必需处理大量的光照、材质和阴影计算任务&#xff0c;因此&#xff0c;良好的渲染方案对从业者而言尤为重口。 一、为何考虑3ds Max云渲染? 云渲染成为了解决…

自动机器学习是什么?概念及应用

自动机器学习 (Auto Machine Learning) 的应用和方法 随着众多企业在大量场景中开始采用机器学习&#xff0c;前后期处理和优化的数据量及规模指数级增长。企业很难雇用充足的人手来完成与高级机器学习模型相关的所有工作&#xff0c;因此机器学习自动化工具是未来人工智能 (A…

【状态机FSM 序列检测 饮料机_2023.12.1】

同步状态机 概念 同步状态机&#xff08;同一脉冲边沿触发&#xff09;&#xff1a;有限个离散状态及某状之间的转移 异步状态机无法综合 分类 Moore状态机 只和状态有关&#xff0c;与输入无关 Mealy状态机 和状态和输入都有关 Mealy型比Moore型少一个状态 结构 由状态寄…

中文字符串逆序输出

今天碰到这个题&#xff0c;让我逆序输出中文字符串&#xff0c;可给我烦死了&#xff0c;之前没有遇到过&#xff0c;也是查了资料才知道&#xff0c;让我太汗颜了。 英文字符串逆序输出很容易&#xff0c;开辟一块空间用来存放逆序后的字符串&#xff0c;从后往前遍历原字符串…

十四 动手学深度学习v2计算机视觉 ——转置矩阵

文章目录 基本操作填充、步幅和多通道再谈转置卷积不填充&#xff0c;步幅为1填充为p&#xff0c;步幅为1填充为p&#xff0c;步幅为s 基本操作 填充、步幅和多通道 填充&#xff1a; 与常规卷积不同&#xff0c;在转置卷积中&#xff0c;填充被应用于的输出&#xff08;常规卷…

小小手表探索更多 好玩伴也是好帮手

华为儿童手表 5X 不仅是孩子的好玩伴&#xff0c;也是家长的好帮手。全能形态让小小手表探索更多&#xff0c;高清双摄记录美好&#xff0c;离线定位随时掌握&#xff0c;绿色纯净守护成长&#xff0c;让孩子享受科技带来的安全与乐趣。

为什么随着网络的增加,传统的多层网络结构的非线性表达很难去表示恒等映射,模型会出现网络退化问题,什么是恒等映射!!

文章目录 一、什么是恒等映射二、对于深度神经网络&#xff0c;保持恒等映射并不是必需的&#xff0c;三、恒等映射可以作为一个简单的基准任务来评估和分析网络的一些重要性质 一、什么是恒等映射 恒等映射指的是输入和输出完全相同的映射关系,也就是yx。它是一个线性函数,没…

cordic 算法学习记录

参考&#xff1a;b站教学视频FPGA&#xff1a;Cordic算法介绍与实现_哔哩哔哩_bilibili FPGA硬件实现加减法、移位等操作比较简单&#xff0c;但是实现乘除以及函数计算复杂度高且占用资源多&#xff0c;常见的计算三角函数/平方根的求解方式有①查找表&#xff1a;先把函数对应…

车载导航系统UI界面,可视化大屏设计(PS源文件)

大屏组件可以让UI设计师的工作更加便捷&#xff0c;使其更高效快速的完成设计任务。现分享车载导航系统科技风蓝黑简约UI界面、车载系统UI主界面、车载系统科技风UI界面、首页车载系统科技感界面界面的大屏Photoshop源文件&#xff0c;开箱即用&#xff01; 若需 更多行业 相关…

攻防世界——BABYRE

下载好文件&#xff0c;IDA64打开 无脑F12 锁定到right 跟进到了这个函数 很明显关键点就是 我们跟进judge 182个字符 懵逼了&#xff0c;说实话 下面是问了人后 —————————— 其实这是一个函数&#xff0c;一个操作指令 但是我们可以发现 在这里&#xff0c;ju…

EasyExcel处理表头的缓存设置

在学习EasyExcel 时会发现针对使用类模型配置表头相关属性时&#xff0c;EasyExcel 会使用到缓存技术以提升表头的解析速度如下代码&#xff1a; 这些参数再何时设置的哪&#xff1f; 在easyExcel 基础参数设置中会有这个参数filedCacheLocation 。默认采用的使用线程级别的…

《opencv实用探索·十九》光流法检测运动目标

前言 光流法&#xff08;Optical Flow&#xff09;是计算机视觉中的一种技术&#xff0c;用于估计图像中相邻帧之间的像素位移或运动。它是一种用于追踪图像中物体运动的技术&#xff0c;可以在视频中检测并测量物体的运动轨迹。 光流的直观理解&#xff1a; 光流是一个视频中两…

web微服务规划

一、背景 通过微服务来搭建web系统&#xff0c;就要对微服务进行规划&#xff0c;包括服务的划分&#xff0c;每个服务和数据库的命名规则&#xff0c;服务用到的端口等。 二、微服务划分 1、根据业务进行拆分 如&#xff1a; 一个购物系统可以将微服务拆分为基础中心、会员…

C++_类的定义和使用

目录 1、类的引用 1.1 类的成员函数 1.2 类成员函数的声明和定义 2、类的定义 2.1 类的访问限定&#xff08;封装&#xff09; 3、类重名问题 4、类的实例化 4.1 类的大小 5、隐含的this指针 5.1 空指针问题 结语&#xff1a; 前言&#xff1a; C的类跟c语言中的结…