在 Vue 應用程式中，我正在呈現任務串列。每個任務都有一個復選框將其標記為已完成。我還可以選擇顯示/隱藏已完成的任務。當“showcompletedtasks”為假時，如果我將打開的任務標記為已完成，則該任務會從串列中消失（如預期的那樣），但它會立即消失，用戶甚至不會看到復選框檢查影片。
我可以延遲資料庫更新，但它仍然會立即從 DOM 中消失，因為復選框是 v 建模為本地資料 (Vuex)。
如何延遲 v-model 更新程序？（以便用戶在消失之前看到實際檢查的任務復選框）？我已經看到需要使用外部庫的解決方案，但是有一個簡單的解決方案可以做到這一點嗎？像 v-model.delay 這樣的東西？
<template>
<!--begin::Item-->
<button @click="$store.state.showcompletedtasks = !$store.state.showcompletedtasks">
Show completed
</button>
<div
class="d-flex align-items-center mb-8"
v-for="task in filteredTaskList"
:key="task.taskid"
>
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid me-5">
<input
class="form-check-input"
type="checkbox"
v-model="task.completed"
@click="handleProfileTaskCheckBox(task)"
>
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<span
href="#"
class="text-gray-800 fw-bold fs-6"
>{{ task.text }}</span>
</div>
<!--end::Description-->
</div>
<!--end:Item-->
</template>
<script>
export default {
methods: {
handleProfileTaskCheckBox(task) {
//here the task Completed status will be updated in Firebase/Firestore
},
},
computed: {
filteredTaskList() {
if (this.$store.state.showcompletedtasks) {
//return all tasks, completed & uncompleted
const originalTaskList = this.$store.state.currentProfileTasks;
return originalTaskList;
} else if (!this.$store.state.showcompletedtasks) {
//return only uncompleted tasks
const originalTaskList = this.$store.state.currentProfileTasks;
const results = originalTaskList.filter((obj) => {
return obj.completed === false;
});
return results;
}
},
},
};
</script>
<style>
</style>
uj5u.com熱心網友回復：
沒有delay你所期望的那樣的事情。您可能知道，VueJS 和其他類似庫的概念是：
view = f(state)
因此，給定輸入資料為filteredTaskList，如果您將任務標記為completed，它將從過濾串列中洗掉，并且必須使 UI 無效并重新呈現。
但是，您所期望的可以通過animation庫/功能來實作。
他們稱它exit animation/exit transition或類似的名稱（不確定正確的名稱/術語是什么）。
幸運的是，VueJS 中內置了一種方法：
vue2：https ://v2.vuejs.org/v2/guide/transitions.html#list-complete-demo
vue3：https ://vuejs.org/guide/built-ins/transition.html#javascript-hooks
在 Vue 2 示例中，如果單擊洗掉按鈕，您將看到該專案將在從串列中完全洗掉之前向下移動。您可以用我們的過渡替換該過渡，以幫助已完成的任務在洗掉之前脫穎而出。
與 Vue 3 示例類似，單擊切換按鈕使球在完全關閉之前移動。將其替換為您自己的影片。
希望它會有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/505619.html
標籤：javascript Vue.js v型