4: 更新和删除

到目前为止，您只将文档插入到我们的集合中。让我们看看如何通过与用户界面交互来更新和删除它们。

4.1: 添加复选框

首先，您需要在 Task 组件中添加一个 checkbox 元素。

请务必添加 readOnly 属性，因为我们没有使用 onChange 来更新状态。

您还可以尝试并观察应用程序的行为以用于学习目的。

您还希望收到一个回调，即当复选框被点击时将被调用的函数。

imports/ui/components/Task.vue

<template>
  <li v-bind:class="taskClassName">
    <input
      type="checkbox"
      readOnly
      v-bind:checked="!!this.task.checked"
    @click="toggleChecked"
  />
  <span class="text">{{ this.task.text }}</span>
</li>
</template>
 ..

4.2: 切换复选框

现在您可以更新任务文档以切换其 checked 字段。

创建一个函数来更改您的文档并将其传递给您的 Task 组件。

imports/ui/components/Task.vue

..
<script>
    import { TasksCollection } from "../../api/TasksCollection";
    export default {
      props: ["task"],
      data() {
        return {};
      },
      computed: {
        taskClassName: function() {
          return this.task.checked ? "checked" : "";
        }
      },
      methods: {
        toggleChecked() {
          // Set the checked property to the opposite of its current value
          TasksCollection.update(this.task._id, {
            $set: { checked: !this.task.checked }
          });
        },
      }
    };
</script>
..

我们调用 TasksCollection.update 来勾选一个任务。

集合上的 update 函数接受两个参数。第一个是识别集合子集的选择器，第二个是更新参数，指定应对匹配的对象执行的操作。

在这种情况下，选择器只是相关任务的 _id。更新参数使用 $set 切换 checked 字段，该字段将表示任务是否已完成。

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

4.3: 删除任务

您可以用几行代码删除任务。

首先在 Task 组件中的文本后添加一个按钮并接收一个回调函数。

imports/ui/components/Task.vue

..
<button class="delete" @click="deleteThisTask">
×
</button>
..

现在将删除逻辑添加到方法中

imports/ui/components/Task.vue

..  
  methods: {
    ..
    deleteThisTask() {
      TasksCollection.remove(this.task._id);
    }
  }
  ..

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

回顾：您可以查看代码在本步骤结束时的样子 这里

在下一步中，我们将使用 Flexbox 使用 CSS 改善应用程序的外观。