From 435cefc3dfad72adba51acb7104cea7f88389350 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Thu, 19 Jan 2023 18:16:14 +0800
Subject: [PATCH] =?UTF-8?q?todolist=E5=AD=A6=E4=B9=A0=E4=B8=B4=E6=97=B6?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=812-=E7=BC=96=E5=86=99=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BD=86=E6=98=AF=E9=81=87=E5=88=B0=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20Error=20in=20v-on=20handler:=20"TypeError:=20this.c?=
 =?UTF-8?q?heckTodo=20is=20not=20a=20function"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20_脚手架/vue_code/src/App.vue             | 31 +++++++++++++++++--
 .../vue_code/src/components/TodoHeader.vue    | 21 +++++++++++--
 .../vue_code/src/components/TodoItem.vue      | 16 +++++-----
 .../vue_code/src/components/TodoList.vue      | 13 +++++---
 4 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index d72f08e..5371cf3 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -2,8 +2,8 @@
   <div id="root">
     <div class="todo-container">
       <div class="todo-wrap">
-        <TodoHeader/>
-        <TodoList/>
+        <TodoHeader :addTodo="addTodo"/>
+        <TodoList :todos="todos"/>
         <TodoBottom/>
       </div>
     </div>
@@ -22,6 +22,30 @@ export default {
     TodoHeader,
     TodoList,
     TodoBottom
+  },
+  data() {
+    return {
+      todos: [
+        {id: "001", title: "产品", done: true},
+        {id: "002", title: "开发", done: true},
+        {id: "003", title: "测试", done: false}
+      ]
+    }
+  },
+  methods: {
+    addTodo(todoObj) {
+      this.todos.unshift(todoObj)
+    },
+
+    checkTodo(id) {
+      this.todos.forEach((todo) => {
+        if (todo.id === id) todo.done = !todo.done
+      })
+    },
+
+    deleteTodo(id) {
+
+    }
   }
 }
 </script>
@@ -59,10 +83,11 @@ body {
   outline: none;
 }
 
-.todo-container{
+.todo-container {
   width: 600px;
   margin: 0 auto;
 }
+
 .todo-container .todo-wrap {
   padding: 10px;
   border: 1px solid #ddd;
diff --git a/20_脚手架/vue_code/src/components/TodoHeader.vue b/20_脚手架/vue_code/src/components/TodoHeader.vue
index acfc63a..c967cd1 100644
--- a/20_脚手架/vue_code/src/components/TodoHeader.vue
+++ b/20_脚手架/vue_code/src/components/TodoHeader.vue
@@ -1,12 +1,29 @@
 <template>
   <div class="todo-header">
-    <input type="text" placeholder="请输入你的任务名称，按回车确认">
+    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add">
   </div>
 </template>
 
 <script>
+import {nanoid} from "nanoid"
+
 export default {
-  name: "TodoHeader"
+  name: "TodoHeader",
+  props: ['addTodo'],
+  data() {
+    return {
+      title: ''
+    }
+  },
+  methods: {
+    add() {
+      if (!this.title.trim()) return alert("输入不能为空")
+      const todoObj = {id: nanoid(), title: this.title, done: false}
+      this.addTodo(todoObj)
+      this.title = ''
+    }
+  }
+
 }
 </script>
 
diff --git a/20_脚手架/vue_code/src/components/TodoItem.vue b/20_脚手架/vue_code/src/components/TodoItem.vue
index d5ea487..f3f66e0 100644
--- a/20_脚手架/vue_code/src/components/TodoItem.vue
+++ b/20_脚手架/vue_code/src/components/TodoItem.vue
@@ -1,8 +1,8 @@
 <template>
   <li>
     <label>
-      <input type="checkbox" class="TodoItem">
-      <span>xxxxxxx</span>
+      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
+      <span>{{todo.title}}</span>
     </label>
     <button class="btn btn-danger">删除</button>
   </li>
@@ -11,15 +11,13 @@
 <script>
 export default {
   name: "TodoItem",
-  data() {
-    return {
-      todoList: [
-        {id: "001", title: "产品", done: true},
-        {id: "002", title: "开发", done: true},
-        {id: "003", title: "测试", done: false}
-      ]
+  props: ['todo', 'checkTodo'],
+  methods: {
+    handleCheck(id) {
+      this.checkTodo(id)
     }
   }
+
 }
 </script>
 
diff --git a/20_脚手架/vue_code/src/components/TodoList.vue b/20_脚手架/vue_code/src/components/TodoList.vue
index cbf42ba..681197c 100644
--- a/20_脚手架/vue_code/src/components/TodoList.vue
+++ b/20_脚手架/vue_code/src/components/TodoList.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
     <ul class="todo-list">
-      <TodoItem/>
-      <TodoItem/>
-      <TodoItem/>
-      <TodoItem/>
+      <TodoItem
+          v-for="todoObj in todos"
+          :key="todoObj.id"
+          :todo="todoObj"
+          :checkTodo="checkTodo"
+      />
     </ul>
   </div>
 </template>
@@ -13,7 +15,8 @@
 import TodoItem from "@/components/TodoItem.vue";
 export default {
   name: "TodoList",
-  components: {TodoItem}
+  components: {TodoItem},
+  props: ['todos', 'checkTodo']
 }
 </script>