From 61bec8a71dd3a6902b7e16bc3c524eb2a13e4640 Mon Sep 17 00:00:00 2001
From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 28 Jan 2024 01:54:26 +0800
Subject: [PATCH] refactor(playground): replace v-show with v-if

---
 playground/src/todo-mvc.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/playground/src/todo-mvc.vue b/playground/src/todo-mvc.vue
index 4de671f3ed..ed505080ad 100644
--- a/playground/src/todo-mvc.vue
+++ b/playground/src/todo-mvc.vue
@@ -33,43 +33,51 @@ function handleClearComplete() {
 function handleClearAll() {
   tasks.value = []
 }
+
+function handleRemove(idx: number) {
+  tasks.value.splice(idx, 1)
+}
 </script>
 
 <template>
   <h1>todos</h1>
   <ul>
     <!-- TODO: v-for -->
-    <li v-show="tasks[0]" :class="{ del: tasks[0]?.completed }">
+    <li v-if="tasks[0]" :class="{ del: tasks[0]?.completed }">
       <input
         type="checkbox"
         :checked="tasks[0]?.completed"
         @change="handleComplete(0, $event)"
       />
       {{ tasks[0]?.title }}
+      <button @click="handleRemove(0)">x</button>
     </li>
-    <li v-show="tasks[1]" :class="{ del: tasks[1]?.completed }">
+    <li v-if="tasks[1]" :class="{ del: tasks[1]?.completed }">
       <input
         type="checkbox"
         :checked="tasks[1]?.completed"
         @change="handleComplete(1, $event)"
       />
       {{ tasks[1]?.title }}
+      <button @click="handleRemove(1)">x</button>
     </li>
-    <li v-show="tasks[2]" :class="{ del: tasks[2]?.completed }">
+    <li v-if="tasks[2]" :class="{ del: tasks[2]?.completed }">
       <input
         type="checkbox"
         :checked="tasks[2]?.completed"
         @change="handleComplete(2, $event)"
       />
       {{ tasks[2]?.title }}
+      <button @click="handleRemove(2)">x</button>
     </li>
-    <li v-show="tasks[3]" :class="{ del: tasks[3]?.completed }">
+    <li v-if="tasks[3]" :class="{ del: tasks[3]?.completed }">
       <input
         type="checkbox"
         :checked="tasks[3]?.completed"
         @change="handleComplete(3, $event)"
       />
       {{ tasks[3]?.title }}
+      <button @click="handleRemove(3)">x</button>
     </li>
   </ul>
   <p>
-- 
2.47.3