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響應式函數 導致不能及時變化
總結
這種報錯出現的時候一定要回看自己的數據格式是否有問題，尋找別人的方法 或者是查看報錯信息
