关于一些bug的解决1、el-input的输入无效2、搜索之后发现数据不对3、el多选框、单选框点击无用4、

el-input输入无效

原来的代码是

var test = null
但是我发现不能输入任何值
反倒修改test的初始值为123是可以的
于是我确定绑定没问题 就是修改的问题
于是改成
var test = ref()
v-model绑定的值改成test.value就可以了
因为ref是相应式的 可以通过输入框的修改而修改
另外 如果你发现你的输入框不能输入东西还有可能是你的v-model绑定失败造成的

搜索后发现数据不对

问题1 搜索后发现自己的数据不显示了

代码
<el-button type=“text” style=“position: absolute;top:-48px;right:260px;z-index: 99;color: #000;”
@click=“handleButtonClick(‘搜索’), showConfirmationModal2()” :class=“{ ‘blue-text’: activeButton === ‘搜索’ }”>
搜索

            <el-card class="divrow" style="height: 100px;"><div class="divcolumn"><div style="display: flex;flex-direction: row;"><strong>{{ item.title }}</strong></div><p class="item-content" style="width: 60vw;">{{ item.content }}</p><div class="divrow"><text style=" margin-left: 10px; font-size: small; color: gray;">{{ item.time }}前</text><text style=" margin-left: 10px; font-size: 1.1vw; ">{{ item.from }}</text></div></div><img class="arrow-pointer" src="../../assets/svg/向右箭头.svg"style="width: 2.5vw;margin-top: -4.5vw;margin-left: 80vw;" @click="handleArrowClick(item.id, 2)" /></el-card></div></div></div>

js代码为
//查询
var keyword = ref()
// 定义一个函数,用于模糊查询
function searchMessages() {
// 使用filter()方法进行筛选
const result = datas.value.filter(item => {
// 使用正则表达式匹配关键字
const regex = new RegExp(keyword.value, ‘i’);
// 在标题和内容中查找匹配的项
return regex.test(item.title) || regex.test(item.content);
});

// 返回查询结果
return result;
}
const modalVisible2 = ref(false)
// 点击按钮显示模态框
const showConfirmationModal2 = () => {
modalVisible2.value = true;

}
// 用户点击取消按钮
const handleCancel2 = () => {
fetchData1()
modalVisible2.value = false;
}
// 用户点击确定按钮
const handleConfirm2 = () => {

// 调用相应的方法,进行设置
console.log(datas.value)
datas.value = searchMessages();
console.log(datas.value)
datas.value.forEach(item => {
console.log(item)
switch (item.typeid) {
case 0:
item.time = get_time_diff(item.time);
data.value.push(item);
break;
case 1:
item.time = get_time_diff(item.time);
data1.value.push(item);
break;
case 2:
item.time = get_time_diff(item.time);
data2.value.push(item);
break;
}

});
// 关闭模态框
modalVisible2.value = false;
}
// 处理模态框关闭事件
const handleModalClose2 = () => {
// 处理模态框关闭时的逻辑
modalVisible2.value = false;
}

错误排查历程

控制台输出,查看数据有无问题
发现数据已经被修改 由于我使用了 item.time = get_time_diff(item.time);导致之前已经执行过这个方法的数据又重新执行了遍 由于数据格式问题所以数据直接丢失

解决办法

删除这个代码 item.time = get_time_diff(item.time);

搜索之后发现数据没有变

同样是控制台输出我查询到的数据 发现确实查询出来了 往下看发现查出来的数据被push到显示的数组中了

解决办法

将数据初始化为空数组
data.value = [];
data1.value = [];
data2.value = [];再进行push

搜索之后发现数据没有我想要的

我发现一些明明符合条件的数据并没有查询出来 问题原因和第一小点很像,就是数据重复处理导致不能正常的获取数据

总结

其实这几种报错内核就是一个
数组在处理的时候自身也在改变 并不是处理之后赋值给其他数组就完事 其实原先的数组也会改变
这对数据查询以及节约代码量又很好的指导

3 el多选框 单选框点击之后无效果

这个纯粹就是代码出错导致的,我原先是想实现点击一个选框 另一个多选框的点击功能变成可选 取消点击之后又变成非可选 代码如下

{{
item.label }}

使用标签发送:

{{
item.label }}

const isTagDisabled = computed(() => !isSendTag.value.includes(2));
这个是我修改后的代码 之前报错的代码我也忘记了具体是什么样的
大概就是可选数组和绑定的model数据格式是不一样的 并且也未使用ref响应式函数 导致不能及时变化

总结

这种报错出现的时候一定要回看自己的数据格式是否有问题,寻找别人的方法 或者是查看报错信息

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

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

相关文章

有依次对应关系的数组X、Y、Z,如何排序其中一个X数组,使得另外的数组还与排序完成后的数组相对应(C语言实现)

1. 目的 有依次对应关系的数组X、Y、Z&#xff0c;排序其中一个X数组&#xff0c;使得另外的数组还与排序完成后的数组相对应&#xff0c;并打印出排序完成后的X、Y、Z数组。 2. 具体实现 以下面的这个对应关系为例&#xff0c;进行相应编程实现。 X [3.7,7.7,-6.6,1.5,-4.5…

深度学习环境配置(Anaconda+pytorch+pycharm+cuda)

NVIDIA驱动安装 首先查看电脑的显卡版本&#xff0c;步骤为&#xff1a;此电脑右击-->管理-->设备管理器-->显示适配器。就可以看到电脑显卡的版本了。 然后按照电脑信息&#xff0c;到地址 去安装相应的驱动&#xff0c;Notebooks是笔记本的意思&#xff0c;然后下…

[SIGGRAPH-23] 3D Gaussian Splatting for Real-Time Radiance Field Rendering

pdf | proj | code 本文提出一种新的3D数据表达形式3D Gaussians。每个Gaussian由以下参数组成&#xff1a;中心点位置、协方差矩阵、可见性、颜色。通过世界坐标系到相机坐标系&#xff0c;再到图像坐标系的仿射关系&#xff0c;可将3D Gaussian映射到相机坐标系&#xff0c;通…

【MySQL】多表查询、子查询、自连接、合并查询详解,包含大量示例,包你会。

复合查询 前言正式开始一些开胃菜多表查询自连接子查询单行子查询多行子查询in关键字all关键字any关键字多列子查询在from中使用子查询 合并查询union 和 union all 前言 我前面博客讲的所有的查询都是在单表中进行的&#xff0c;从这里开始就要专门针对查询这个话题进行进一步…

连接k8s和凌鲨

通过连接k8s和凌鲨&#xff0c;可以让研发过程中的重用操作更加方便。 更新容器镜像调整部署规模查看日志运行命令 架构 所有操作通过k8s proxy连接&#xff0c;通过设置namespace label赋予访问权限。只有赋予特定label的namespace才能被访问。 使用步骤 部署k8s proxy 你…

【机器学习】On the Identifiability of Nonlinear ICA: Sparsity and Beyond

前言 本文是对On the Identifiability of Nonlinear ICA: Sparsity and Beyond (NIPS 2022)中两个结构稀疏假设的总结。原文链接在Reference中。 什么是ICA(Independent component analysis)&#xff1f; 独立成分分析简单来说&#xff0c;就是给定很多的样本X&#xff0c;通…

电子学会C/C++编程等级考试2022年12月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:加一 输入一个整数x,输出这个整数加1后的值,即x+1的值。 时间限制:1000 内存限制:65536输入 一个整数x(0 ≤ x ≤ 1000)。输出 按题目要求输出一个整数。样例输入 9样例输出 10 答案: //参考答案: #include<bits/st…

Linux中的进程程序替换

Linux中的进程程序替换 1. 替换原理2. 替换函数3. 函数解释4. 命名理解程序替换的意义 1. 替换原理 替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时,该进程的…

C++ DAY08 异常

概念 异常事件&#xff08;如&#xff1a;除 0 溢出&#xff0c;数组下标越界&#xff0c;所要读取的文件不存在 , 空指针&#xff0c;内存不足 等等&#xff09; 在 C 语言对错误的处理是两种方法&#xff1a; 一是使用整型的返回值标识错误&#xff1b; 二是使用 errn…

含分布式电源的配电网可靠性评估(matlab代码)

1主要内容 该程序参考《基于仿射最小路法的含分布式电源配电网可靠性分析》文献方法&#xff0c;通过概率模型和时序模型分别进行建模&#xff0c;实现基于概率模型最小路法的含分布式电源配电网可靠性评估以及时序模型序贯蒙特卡洛模拟法的含分布式电源配电网可靠性评估。程序…

【docker】docker总结

一、Docker简介 Docker是开源应用容器引擎&#xff0c;轻量级容器技术。基于Go语言&#xff0c;并遵循Apache2.0协议开源Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的Linux系统上&#xff0c;也可以实现虚拟化容…

基于STM32的色彩识别与分类算法优化

基于STM32的色彩识别与分类算法优化是一项与图像处理和机器学习相关的研究任务&#xff0c;旨在实现高效的色彩识别和分类算法在STM32微控制器上的运行。本文将介绍基于STM32的色彩识别与分类算法优化的原理和实现步骤&#xff0c;并提供相应的代码示例。 1. 色彩识别与分类概…

MongoDB的常用操作以及python连接MongoDB

一,MongoDB的启动 mongod --dbpath..\data\db mongodb注意同时开两个窗口&#xff0c;不要关&#xff01; 二, MongoDB的简单使用 简单介绍一下mongoDB中一些操作 show dbs: 显示所有数据库 show databases: 显示所有数据库 use xxxx: 使用指定数据库/创建数据库&#xff08…

OpenCvSharp从入门到实践-(02)图像处理的基本操作

目录 图像处理的基础操作 1、读取图像 1.1、读取当前目录下的图像 2、显示图像 2.1、Cv2.ImShow 用于显示图像。 2.2、Cv2.WaitKey方法用于等待用户按下键盘上按键的时间。 2.3、Cv2.DestroyAllWindows方法用于销毁所有正在显示图像的窗口。 2.4实例1-显示图像 2.4实例…

机器人算法—ROS TF坐标变换

1.TF基本概念 &#xff08;1&#xff09;什么是TF&#xff1f; TF是Transformations Frames的缩写。在ROS中&#xff0c;是一个工具包&#xff0c;提供了坐标转换等方面的功能。 tf工具包&#xff0c;底层实现采用的是一种树状数据结构&#xff0c;根据时间缓冲并维护多个参考…

No matching variant of com.android.tools.build:gradle:7.4.2 was found.

一、报错信息 创建个新项目&#xff0c;运行直接报错&#xff0c;信息如下&#xff1a; No matching variant of com.android.tools.build:gradle:7.4.2 was found. The consumer was configured to find a runtime of a library compatible with Java 8, packaged as a jar,…

Visual Studio连接unity编辑器_unity基础开发教程

Visual Studio连接unity编辑器 问题描述解决方法意外情况 问题描述 当我们在unity编辑器中打开C#脚本的时候发现Visual Studio没有连接unity编辑器&#xff0c;在编写代码的时候也没有unity关键字的提醒。 简单来说就是敲代码没有代码提示。 解决方法 这时候需要在unity中进行…

数字逻辑电路基础-时序逻辑电路之锁存器

文章目录 一、锁存器简介二、verilog源码三、综合及仿真结果 一、锁存器简介 本文介绍数字逻辑电路中一种常用的基础时序逻辑电路-锁存&#xff0c;顾名思义&#xff0c;它的功能就是将输入在控制信号有效时透明传输到输出端&#xff0c;当控制信号无效时&#xff0c;输出值保…

Tomcat实现WebSocket即时通讯 Java实现WebSocket的两种方式

HTTP协议是“请求-响应”模式&#xff0c;浏览器必须先发请求给服务器&#xff0c;服务器才会响应该请求。即服务器不会主动发送数据给浏览器。 实时性要求高的应用&#xff0c;如在线游戏、股票实时报价和在线协同编辑等&#xff0c;浏览器需实时显示服务器的最新数据&#x…

【高级网络程序设计】Week2-3 HTML

一、The Basics 1. HTML&HTML file HTMLMarkup languageHyper Text Markup LanguageHTML fileText file with markup tags.htm/.html extension Create an html file Open an editor Type: <html><head><titile><body> Save it as .html Open i…