vue2

07-vue2/09-final-course-dashboard/starter.js

@@ -49,31 +49,49 @@ new Vue({
       // 任务：
       // 1. 先按 statusFilter 过滤
       // 2. 再按 keyword 过滤标题
-      return this.courses;
+      let value = this.keyword.trim().toUpperCase()
+      let a
+      if (this.statusFilter === "all") {
+        a = this.courses.filter(item => item.title.toUpperCase().includes(value))
+      } else if (this.statusFilter === "done") {
+        const b = this.courses.filter(item => item.finished === true)
+        a = b.filter(item => item.title.toUpperCase().includes(value))
+      } else if (this.statusFilter === "doing") {
+        const b = this.courses.filter(item => item.finished === false)
+        a = b.filter(item => item.title.toUpperCase().includes(value))
+      }
+      return a
     },
     totalCount() {
       return this.courses.length;
     },
     finishedCount() {
       // 任务：返回已完成课程数量
-      return 0;
+      const b = this.courses.filter(item => item.finished === true)
+      return b.length
     },
     visibleCount() {
       // 任务：返回当前筛选后的数量
-      return 0;
+      const a = this.filteredCourses
+      return a.length;
     },
   },
   watch: {
     keyword(newValue) {
       // 任务：在控制台输出关键字变化
+      console.log(`关键词：${newValue}`);
+
     },
   },
   methods: {
     toggleCourse(courseId) {
       // 任务：根据 courseId 切换 finished
+      const a = this.courses.find(item => item.id === courseId)
+      a.finished = !a.finished
     },
     focusSearch() {
       // 任务：通过 ref 聚焦输入框
+      this.$refs.searchInput.focus()
     },
   },
 });