我有一個 Vue.js 組件頁面，它從我的后端獲取一些資料：
<script setup>
const props = defineProps({
records: {
type: Object,
},
});
</script>
我希望我的用戶能夠從中選擇三種不同的過濾器/狀態：
- 無標簽
- 完全的
- 跳過
以下是我如何獲取不同過濾器的記錄。我collect.js用來簡化物件的作業：
let getRecords = () => {
return collect(props.records)
}
const getUnlabeledRecords = () => {
return getRecords()
.where('skipped', false)
.where('processed', false);
}
const getCompletedRecords = () => {
return getRecords()
.where('processed', true);
}
const getSkippedRecords = () => {
return getRecords()
.where('processed', false)
.where('skipped', true);
}
//Load all records on page load.
const allRecords = ref(getUnlabeledRecords());
//Show current record to the user.
const current = ref(allRecords.value.first());
然后我的用戶可以點擊他們想要的過濾器：
<a :class="{'bg-gray-100' : currentFilter === 'Unlabeled' }"
@click="allRecords = getUnlabeledRecords(), currentFilter = 'Unlabeled'">
Unlabeled ({{ getUnlabeledRecords().count() }})
</a>
<a :class="{'bg-gray-100' : currentFilter === 'Skipped' }"
@click="allRecords = getSkippedRecords(), currentFilter = 'Skipped'">
Skipped ({{ getSkippedRecords().count() }})
</a>
<a :class="{'bg-gray-100' : currentFilter === 'Completed' }"
@click="allRecords = getCompletedRecords(), currentFilter = 'Completed'">
Completed ({{ getCompletedRecords().count() }})
</a>
上面的代碼可以作業，但感覺很“笨拙”，而且擴展性不強。比如說，我想引入更高級的過濾——或者只是其他“過濾選項”，我必須復制很多代碼。
有人對我如何以更好的方式做到這一點有建議嗎？
uj5u.com熱心網友回復：
這是一個有點寬泛的問題，因為我們不知道您的資料格式或您可能想要的未來過濾器。這使得很難給你一個真正好的答案。但是，一個簡單的勝利似乎是引入一個過濾器類/物件，其中包含您想要過濾的詳細資訊，例如：
const filters = [
{
text: 'Unlabeled',
statesToFilterOn: [
{ key: 'skipped', value: false },
{ key: 'processed', value: false },
]
},
{
text: 'Skipped',
statesToFilterOn: [
{ key: 'skipped', value: true },
{ key: 'processed', value: false },
]
}
]
現在您可以使用 getFilteredData 方法獲取過濾后的資料：
const currentFilteredData = ref(getRecords());
const currentFilter = ref();
function applyFilter(filter) {
currentFilter.value = filter;
currentFilteredData.value = getFilteredData(filter);
}
function getFilteredData(filter) {
let filtered = getRecords();
filter.statesToFilterOn.forEach(state => {
filtered = filtered.where(state.key, state.value);
});
return filtered;
}
您的 UI 可能如下所示：
<a
v-for="filter in filters"
:key="filter.text"
@click="applyFilter(filter)"
>
{{ filter.text }} ({{ getFilteredData(filter).count }})
</a>
現在，如果您想添加更多過濾器，只需在filters陣列中添加一個即可。您可以根據需要多次執行此操作，并且您無需更改過濾器陣列之外的任何內容。我認為這是一個很好的答案，我可以根據給出的資訊給出。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486814.html