From db48b95509062ee04cdf0338c9eaee878f29f364 Mon Sep 17 00:00:00 2001
From: dichgrem <brcefy@gmail.com>
Date: Mon, 1 Dec 2025 13:28:47 +0800
Subject: [PATCH] fix:toggleTodo

---
 todos/src/App.vue                 |  5 +++++
 todos/src/components/TodoList.vue | 10 +++++++---
 todos/src/stores/todo.js          |  9 +++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/todos/src/App.vue b/todos/src/App.vue
index fd187db..23db1a3 100644
--- a/todos/src/App.vue
+++ b/todos/src/App.vue
@@ -28,6 +28,10 @@ function editTodo({ item, text }) {
   todoStore.editTodo({ item, text });
 }
 
+function toggleTodo(item) {
+  todoStore.toggle(item);
+}
+
 function changeTabType(type) {
   console.log("App.vue tab change:", type);
   todoStore.setTab(type);
@@ -50,6 +54,7 @@ const showTodos = computed(() => {
     @delTodo="delTodo"
     @move="moveTodo"
     @edit="editTodo"
+    :toggleTodo="toggleTodo"
   />
 
   <TodoFooter
diff --git a/todos/src/components/TodoList.vue b/todos/src/components/TodoList.vue
index b08002d..c59635c 100644
--- a/todos/src/components/TodoList.vue
+++ b/todos/src/components/TodoList.vue
@@ -11,8 +11,12 @@
         @drop="onDrop(index)"
       >
         <div class="tdItem-main">
-          <input type="checkbox" v-model="item.completed" class="toToggle" />
-
+          <input 
+            type="checkbox" 
+            :checked="item.completed" 
+            @change="toggleTodo(item)" 
+            class="toToggle" 
+          />
           <!-- <span class="tdTxt" :class="{ completed: item.completed }"> -->
           <!--   {{ item.txt }} -->
           <!-- </span> -->
@@ -46,7 +50,7 @@
 
 <script>
 export default {
-  props: ["todos"],
+  props: ["todos", "toggleTodo", "delTodo", "editTodo", "moveTodo"],
   data() {
     return {
       editingId: null,
diff --git a/todos/src/stores/todo.js b/todos/src/stores/todo.js
index c46f5c9..5027b7f 100644
--- a/todos/src/stores/todo.js
+++ b/todos/src/stores/todo.js
@@ -65,6 +65,15 @@ export const useTodoStore = defineStore("todoStore", {
       console.log("Current todos:", toRaw(this.todos));
     },
 
+    toggle(item) {
+      const t = this.todos.find(t => t.id === item.id);
+      if (t) {
+        t.completed = !t.completed;
+        this.save();
+        console.log("Toggled:", t);
+      }
+    },
+
     clearCompleted() {
       this.todos = this.todos.filter((t) => !t.completed);
       this.save();