todolist学习临时代码2-编写部分逻辑但是遇到问题

Error in v-on handler: "TypeError: this.checkTodo is not a function"

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>
@@ -63,6 +87,7 @@ body {
   width: 600px;
   margin: 0 auto;
 }
+
 .todo-container .todo-wrap {
   padding: 10px;
   border: 1px solid #ddd;

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>
 

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>
 

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>