fix:toggleTodo

README.md

@@ -1,2 +1,32 @@
 # Vue
-This is a Vue test on school.
+
+<p align="center">
+  <img src="https://github.com/Dichgrem/Vue/blob/main/todos/view.png" width="300">
+</p>
+
+## 概述
+
+这是一个基于 **Vue 3 + Pinia** 的轻量级待办事项 (Todo) 项目，具有以下功能：
+
+* 添加/删除/编辑待办事项
+* 按照全部 / 未完成 / 已完成进行筛选
+* 拖拽排序待办事项
+* 一键清除已完成事项
+* 本地存储 (`localStorage`) 数据持久化
+* 控制台打印操作日志，便于调试
+
+
+## 结构
+
+```
+.
+├── App.vue              # 根组件，管理整体状态和方法
+├── main.js              # 项目入口
+├── stores/todo.js       # Pinia 状态管理，存储 todos 数据和操作方法
+├── components
+│   ├── TodoHeader.vue   # 输入框和添加功能
+│   ├── TodoList.vue     # 待办事项列表，支持编辑和拖拽排序
+│   └── TodoFooter.vue   # 底部统计、筛选和清除已完成
+├── assets               # 静态资源（CSS/图片）
+└── style.css            # 全局样式
+```

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

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,

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();