购物网站建设资讯sem优化公司
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响应式函数 导致不能及时变化
总结
这种报错出现的时候一定要回看自己的数据格式是否有问题，寻找别人的方法 或者是查看报错信息