昨天（Day 3）已經能新增任務，但清單還只是能「顯示資料」而已。今天（Day 4）我希望能讓清單有更多常見又方便的功能，比如：加上 checkbox，勾選就把任務標記為完成；畫面自動更新，而且完成項會有刪除線＋淡色背景，讓使用者感受到那種能輕鬆一眼就看懂的狀態。

為了達到我所希望的目標，我們首先需要，在父層 App.vue中， 新增 toggleDone(id)，用 id 找到那筆任務，反轉 done 布林值，並把這個方法透過事件監聽掛在子元件：@toggle-done="toggleDone"，像是這樣：


再將子層 TaskList.vue 每筆任務前，加 checkbox，變更時 emit('toggle-done', id) ，通知父層，讓兩者得以溝通，像是這樣：

最後，再將已完成任務的刪除線，與淡色背景樣式加上去，最後得到的畫面就會長這樣：

現在的畫面符合目標：
1.每筆任務前都有 checkbox。
2.勾選 → 任務文字會有刪除線、背景變淡。
3.取消勾選 → 任務恢復正常。
4.新增的任務（像「深呼吸」）也能馬上勾選/取消。

到這裡已經完成今天的進度，當然有新增和勾選功能，也不能少了刪除功能，期待明天的文章吧！