我已經通過本指南創建了一個搜索過濾器輸入欄位，但無法弄清楚如何computed在v-model.
我已將指南中的代碼轉換為：
<template>
<div id="table-cms" >
<input type="search" placeholder="Search" v-model="filter">
<p>{{ filter }}</p>
<p>{{ state.array }}</p>
</div>
</template>
<script setup>
import {computed, reactive} from "vue";
const state = reactive({
search: null,
array: [
{id: 1, title: 'Thanos', content: '123'},
{id: 2, title: 'Deadpool', content: '456'},
{id: 3, title: 'Batman', content: '789'}
]
})
const filter = computed({
get() {
console.log('check1')
return state.search
},
set() {
if (state.search) {
console.log('check2a')
return state.array.filter(item => {
return state.search
.toLowerCase()
.split(" ")
.every(v => item.title.toLowerCase().includes(v))
});
} else {
console.log('check2b')
return state.array;
}
}
})
</script>
但控制臺顯示：
check1
check2b
check2b
check2b
...
這意味著它computed被執行但它沒有進入if (state.search) {}（實際的過濾器）。Displayingstate.array會渲染初始陣列，但不會通過在輸入欄位中鍵入不同的標題來更新：
<p>{{ state.array }}</p>
渲染：
[
{
"id": 1,
"title": "Thanos",
"content": "123"
},
{
"id": 2,
"title": "Deadpool",
"content": "456"
},
{
"id": 3,
"title": "Batman",
"content": "789"
}
]
我究竟做錯了什么？
uj5u.com熱心網友回復：
你必須在你的輸入中state.search使用v-model：
<input class="search-field textfield-closed" type="search" placeholder="Search" v-model="state.search">
否則它會null永遠存在，因為它沒有改變，這會導致代碼跳過 if 陳述句。
此外，您的計算過濾器中不需要設定器。
<template>
<div id="table-cms" >
<input
type="search"
placeholder="Search"
v-model="state.search"
/>
<p>{{ state.array }}</p>
</div>
</template>
<script setup>
import { computed, reactive } from "vue";
const state = reactive({
search: null,
array: [
{ id: 1, title: "Thanos", content: "123" },
{ id: 2, title: "Deadpool", content: "456" },
{ id: 3, title: "Batman", content: "789" },
],
});
const filter = computed(() => {
if (state.search) {
//console.log('check2a')
return state.array.filter((item) => {
return state.search
.toLowerCase()
.split(" ")
.every((v) => item.title.toLowerCase().includes(v));
});
} else {
console.log("check2b");
return state.array;
}
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442944.html