6: 过滤任务

在本步骤中，您将按状态过滤任务并显示待办任务的数量。

6.1: 过滤任务

首先，您将添加一个按钮来显示或隐藏列表中的已完成任务。

我们将学习如何使用 Vue 的组件状态来存储仅在客户端使用的临时信息。

首先，我们需要在 App 组件中添加一个按钮

imports/ui/App.vue

..
<div class="main">
  <TaskForm />
  <div class="filter">
    <button
        v-model="hideCompleted"
        @click="toggleHideCompleted"
    >
      <span v-if="hideCompleted">Show All</span>
      <span v-else>Hide Completed Tasks</span>
    </button>
  </div>
  ..
</div>
..

您可以看到它读取了 this.hideCompleted。我们需要在组件的数据对象中初始化 this.hideCompleted 的值

imports/ui/App.vue

..
},
  data() {
    return {
      hideCompleted: false
    };
  },
  methods: {},
..

我们可以直接从事件处理程序更新 this.hideCompleted，这将导致组件重新渲染

imports/ui/App.vue

..
  },
  methods: {
    toggleHideCompleted() {
      this.hideCompleted = !this.hideCompleted;
    }
  },
  meteor: {
..

6.2: 按钮样式

您应该为按钮添加一些样式，使其看起来不那么灰暗，并且对比度更好。您可以使用以下样式作为参考

client/main.css

.filter {
  display: flex;
  justify-content: center;
}

.filter > button {
  background-color: #62807e;
}

6.3 过滤任务

现在，我们需要更新任务列表，以便在 this.hideCompleted 为 true 时过滤掉已完成的任务：imports/ui/App.vue

..
meteor: {
  tasks() {
    let filteredTasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch();
    
    if (this.hideCompleted) {
      filteredTasks = filteredTasks.filter(task => !task.checked);
    }

    return filteredTasks;
  }
}
..

6.4: Meteor 开发工具扩展

您可以安装扩展程序以可视化 Mini Mongo 中的数据。

Meteor DevTools Evolved 将帮助您调试应用程序，因为您可以看到 Mini Mongo 中有哪些数据。

您还可以看到 Meteor 从服务器发送和接收的所有消息，这对于您了解 Meteor 的工作原理很有用。

使用此 链接 在 Google Chrome 浏览器中安装它。

6.5: 待办任务

更新 App 组件以在应用栏中显示待办任务的数量。

当没有待办任务时，您应该避免在应用栏中添加零。

imports/ui/App.vue

..
    <h1>
      📝️ To Do List
      <span v-if="incompleteCount > 0">({{incompleteCount}})</span>
    </h1>
..
    return filteredTasks;
  },
  incompleteCount() {
    return TasksCollection.find({ checked: { $ne: true } }).count();
  }
..

您可以在同一个 useTracker 中执行这两个查找，然后返回一个包含这两个属性的对象，但为了使代码更容易理解，我们在这里创建了两个不同的跟踪器。

您的应用程序应该如下所示

回顾：您可以在本步骤结束时查看代码应如何编写 此处

在下一步中，我们将向您的应用程序中添加用户访问权限。