4: 更新和删除

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

4.1: 添加复选框

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

您还可以尝试并查看应用程序的行为以供学习目的。

现在，我们需要将 v-model 指令添加到复选框。这将允许我们将复选框的值绑定到任务文档的 checked 字段。

为此，我们需要在任务文档中添加一个 ref。这将允许我们在模板中访问任务文档。

imports/ui/components/Task.vue

<script setup>
  import { ref } from 'vue';

  const props = defineProps({
  task: Object,
});

const taskRef = ref(props.task);
</script>

<template>
  <div class="flex items-center rounded px-4 py-2 mb-2">
    <li>
      <input v-model="taskRef.checked" type="checkbox" readonly :checked="taskRef.checked" />
    </li>
    <span class="text-gray-600 pl-2" :class="{ 'text-gray-400 italic line-through': taskRef.checked }">
      {{ task.text }}
    </span>
  </div>
</template>
 ..

4.2: 切换复选框

在更改 UI 之前，我们需要实现更新任务文档的方法。因此，使用以下代码更新 tasksMethods.js 文件

imports/api/tasksMethods.js

import { Meteor } from 'meteor/meteor';

import { check } from 'meteor/check';
import { TasksCollection } from '../db/TasksCollection';

Meteor.methods({
    'tasks.insert'(text) {
        check(text, String);

        TasksCollection.insert({
            text,
            createdAt: new Date,
            userId: this.userId,
        })
    },

    'tasks.remove'(taskId) {
        check(taskId, String);

        TasksCollection.remove(taskId);
    },

    'tasks.setIsChecked'(taskId, checked) {
        check(taskId, String);
        check(checked, Boolean);

        TasksCollection.update(taskId, {
            $set: {
                checked
            }
        });
    }
});

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

您需要在任务文档的 checked 字段中添加一个 watch。这将允许我们在切换复选框时更新任务文档。

我们还有一个名为 task 的 prop 传递给组件。此 prop 是一个表示任务文档的对象。我们可以使用此 prop 来监视任务文档的 checked 字段。

imports/ui/components/Task.vue

<script setup>
import { Meteor } from 'meteor/meteor';
import { ref, watch } from 'vue';

const props = defineProps({
  task: Object
});

const taskRef = ref(props.task);

watch(
  () => !!taskRef.value.checked,
  (newCheckedValue) => {
    Meteor.call('tasks.setIsChecked', taskRef.value._id, newCheckedValue);
  },
  { immediate: true }
);
</script>

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

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

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

4.3: 删除任务

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

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

imports/ui/components/Task.vue

...
{{ task.text }}
</span>

<button 
class="ml-auto bg-red-500 hover:bg-red-600 text-white font-bold py-0.5 px-2 rounded"
@click="deleteTask"> x 
</button>

...

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

imports/ui/components/Task.vue

...

const deleteTask = () => {
  Meteor.call('tasks.remove', taskRef.value._id);
}

...

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

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

在下一步中，我们将使用 Tailwind CSS 改进应用程序的外观！