【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.mzph.cn/news/209969.shtml

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

相关文章

Educational Codeforces Round 156 (Rated for Div. 2)补题

Sum of Three 题目大意&#xff1a;将一个正整数n分成3个不同的正整数x,y,z,保证三个数都不能整除3&#xff0c;如果无法实现就输出NO. 思路&#xff1a;这个题实际上特别简单&#xff0c;我们可以发现当n比较大的时候&#xff0c;我们可以从中取1&#xff0c;然后第二个数也…

【Java】Java环境以及EditPlus编辑器安装与配置流程

要安装和配置Java环境以及EditPlus编辑器&#xff0c;请按照以下步骤操作&#xff1a; ### 安装Java Development Kit (JDK) 1. 访问Java官方网站下载最新版本的JDK。 2. 运行下载的JDK安装程序&#xff0c;并按照提示完成安装。 3. 安装完成后&#xff0c;记下JDK的安装路径&a…

perf与火焰图-性能分析工具

参考链接 perf性能分析工具使用分享 如何读懂火焰图&#xff1f;-阮一峰 perf基本用法-record,report-知乎 火焰图抓取 准备&#xff1a; centos安装perf工具 dnf install perf下载火焰图解析代码 git clone https://github.com/brendangregg/FlameGraph.git抓取指定进程…

Orcal数据库Schema理解、表分区理解

目录 1 Schema1.1 Orcal数据库示例1.2 MySQL数据库示例 2 Orcal表分区2.1 创建表分区2.2 查看表分区2.3 查看指定分区数据 此前未了解过Schema的概念&#xff0c;仅知道Orcal数据库比较侧重这个概念&#xff0c;搜遍全网都&#xff0c;都是啰哩吧嗦的搬抄定义&#xff0c;特此在…

LeetCode算法题解(单调栈)|LeetCode503. 下一个更大元素 II、LeetCode42. 接雨水

一、LeetCode503. 下一个更大元素 II 题目链接&#xff1a;503. 下一个更大元素 II 题目描述&#xff1a; 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的…

LIMoE:使用MoE学习多个模态

文章链接&#xff1a;Multimodal Contrastive Learning with LIMoE: the Language-Image Mixture of Experts 发表期刊&#xff08;会议&#xff09;: NeurIPS 2022 目录 1.背景介绍稀疏模型 2.内容摘要Sparse Mixture-of-Experts ModelsContrastive LearningExperiment Analy…

Kubernetes入门笔记 ——(3)理解pod对象

为什么需要pod 最为熟知的一句话&#xff1a;pod是k8s的最小调度单位。刚开始听到这句话时会想&#xff0c;已经有容器了&#xff0c;k8s为什么还要搞个pod出来&#xff1f;容器和pod是什么关系&#xff1f;容器的本质是进程&#xff0c;而k8s本质上类似操作系统。 熟悉Linux的…

SpringBoot系列之启动成功后执行业务的方法归纳

SpringBoot系列之启动成功后执行业务逻辑。在Springboot项目中经常会遇到需要在项目启动成功后&#xff0c;加一些业务逻辑的&#xff0c;比如缓存的预处理&#xff0c;配置参数的加载等等场景&#xff0c;下面给出一些常有的方法 实验环境 JDK 1.8SpringBoot 2.2.1Maven 3.2…

python dataframe 列中 字符串( ‘2815512706605‘)过大 转不了float 用Decimal

from decimal import Decimaldf["accFillSz"] df["accFillSz"].apply(lambda x: Decimal(x)) 2815512706605这个值超出了Python中float类型的最大表示范围,无法直接转换为浮点数。 Python中float类型使用IEEE 754标准的64位双精度浮点数表示,最大值大约为…

欧拉回路欧拉路【详解】

1.引入 2.概念 3.解决方法 4.例题 5.回顾 1.引入 经典的七桥问题 哥尼斯堡是位于普累格河上的一座城市&#xff0c;它包含两个岛屿及连接它们的七座桥&#xff0c;如下图所示。 可否走过这样的七座桥&#xff0c;而且每桥只走过一次&#xff1f; 你怎样证明&#xff1f;…

【Linux top命令】

文章目录 深入了解Linux top命令&#xff1a;实时监控系统性能1. 什么是top命令&#xff1f;2. 使用top命令3. top命令交互操作 深入了解Linux top命令&#xff1a;实时监控系统性能 1. 什么是top命令&#xff1f; top命令是一个用于实时监控系统性能的文本界面工具。它显示当…

Linux上使用独立显卡Tesla T4(测试视频压缩)

背景 将视频处理程序单独部署至K8S之外&#xff0c;使用独立GPU显卡的一台服务器上。 需事先对GPU性能做简单测试。 已通过zabbix对Linux进行了系统资源监控。 已通过PrometheusGrafana对显卡Tesla T4做了性能监控。 逐步补充&#xff0c;稍等 2023年12月6日 操作 查看当前…

鸿蒙Harmony开发初探

一、背景 9月25日华为秋季全场景新品发布会&#xff0c;余承东宣布鸿蒙HarmonyOS NEXT蓄势待发&#xff0c;不再支持安卓应用。网易有道、同程旅行、美团、国航、阿里等公司先后宣布启动鸿蒙原生应用开发工作。 二、鸿蒙Next介绍 HarmonyOS是一款面向万物互联&#xff0c;全…

[Linux] 基于LAMP架构安装论坛

一、安装Discuz论坛 1.1 创建数据库&#xff0c;并进行授权 mysql -u root -p123CREATE DATABASE bbs; #创建一个数据库GRANT all ON bbs.* TO bbsuser% IDENTIFIED BY admin123; #把bbs数据库里面所有表的权限授予给bbsuser,并设置密码admin123flush privileges; #刷新数据库…

Java 中的抽象类与接口:深入理解与应用

文章目录 什么是抽象类&#xff1f;什么是接口&#xff1f;抽象类和接口的使用场景抽象类和接口的区别结论 在 Java 编程语言中&#xff0c;抽象类和接口是两种重要的机制&#xff0c;用于实现抽象化和多态性。这两种机制都允许我们定义一种通用的类型&#xff0c;然后通过继承…

数据结构——栈与栈排序

栈的特性 栈是一种遵循后进先出&#xff08;LIFO&#xff09;原则的数据结构。其基本操作包括&#xff1a; push&#xff1a;将元素添加到栈顶。pop&#xff1a;移除栈顶元素。peek&#xff1a;查看栈顶元素&#xff0c;但不移除。 栈排序的原理 栈排序的核心是使用两个栈&…

[渗透测试学习] Devvortex - HackTheBox

文章目录 信息搜集解题步骤提交flag 信息搜集 扫描端口 nmap -sV -sC -p- -v --min-rate 1000 10.10.11.242发现80端口有http服务&#xff0c;并且是nginx服务 尝试访问web界面&#xff0c;发现跳转到http://devvortex.htb/无法访问 我们用vim添加该域名即可 sudo vim /etc/…

J.408之数据结构

J-408之数据结构_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 思维好题&#xff0c;直接用两个set存没出现的数字就好了 // Problem: 408之数据结构 // Contest: NowCoder // URL: https://ac.nowcoder.com/acm/contest/68572/J // Me…

ClickHouse安装和部署

ClickHouse安装过程&#xff1a; ClickHouse支持运行在主流64位CPU架构&#xff08;X86、AArch和PowerPC&#xff09;的Linux操作 系统之上&#xff0c;可以通过源码编译、预编译压缩包、Docker镜像和RPM等多种方法进行安装。由于篇幅有限&#xff0c;本节着重讲解离线RPM的安…

RAW和YUV的区别

RAW是指未经过任何压缩或处理的原始图像数据。在摄像头中&#xff0c;原始图像数据可以是来自图像传感器的未经处理的像素值。这些原始数据通常以一种Bayer模式的形式存在&#xff0c;其中每个像素仅包含一种颜色信息&#xff08;红色、绿色或蓝色&#xff09;&#xff0c;需要…