如何延遲復選框的 v-model 同步？

Question

在 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>

Answer 1

沒有您期望的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 示例類似，單擊切換按鈕使球在完全關閉之前移動。 用您自己的 animation 替換它。

希望它會有所幫助。