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

关于一些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响应式函数导致不能及时变化