3: 表单和事件

所有应用程序都需要允许用户对存储的数据执行某些类型的交互。在我们的例子中，第一种交互类型是插入新的任务，否则我们的应用程序就没有多大价值，不是吗？

用户在网站中插入或编辑数据的主要方式之一是通过表单，在大多数情况下，使用<form>标签是一个好主意，因为它为其中的元素提供了语义含义。

3.1: 创建任务表单

首先，我们需要创建一个简单的表单组件来封装我们的逻辑。

在您的ui/components文件夹中创建一个名为TaskForm.vue的新文件。

imports/ui/components/TaskForm.vue

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

const newTask = ref('')

const addTask = () => {
  console.log(newTask.value)
}
</script>

<template>
    <form @submit.prevent="addTask">
        <input
            v-model="newTask"
            class=" border border-gray-300 rounded-md py-2 px-4 mr-2 text-gray-600 text-sm focus:outline-none focus:border-gray-400 focus:ring-0"
            type="text" placeholder="Type to add new tasks" />
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded" type="submit">Add Task</button>
    </form>
</template>

此表单将添加一个具有v-model属性的输入元素。newTask数据字段现在将通过双向绑定绑定到输入元素的值。

您还可以看到表单元素具有一个@submit.prevent属性，当表单提交时，该属性将调用addTask方法。@是v-on:的简写。prevent修饰符将阻止表单的默认行为，即重新加载页面。

3.2: 更新 App 组件

然后，我们可以在任务列表上方将此添加到我们的App组件中

imports/ui/App.vue

<script setup>
import Task from './components/Task.vue'
import TaskForm from './components/TaskForm.vue';
import { subscribe, autorun } from 'vue-meteor-tracker'
import { TasksCollection } from '../db/TasksCollection'

subscribe('tasks')
const tasks = autorun(() => TasksCollection.find({}).fetch()).result
</script>

<template>
  <div class="container">
    <header>
      <h1 class="text-4xl font-bold text-gray-800 my-4">Todo List</h1>
    </header>
    <TaskForm />
    <ul class="list-disc list-inside p-4">
      <Task v-for="task of tasks" :key="task._id" :task="task" />
    </ul>
  </div>
</template> 

3.3: 添加插入操作

现在您可以编辑addTask函数以将新任务插入数据库。为此，我们需要实现方法。

方法基本上是到服务器的 RPC 调用，允许您以安全的方式在服务器端执行某些操作。但是您可以阅读更多关于 Meteor 方法的信息 这里。

要创建方法，您需要创建一个名为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,
        })
    },
});

此外，不要忘记在main.js服务器文件中导入您的方法。

server/main.js

import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '../imports/db/TasksCollection'
import "../imports/api/tasksPublications"
import "../imports/api/tasksMethods"

现在，我们需要从我们的TaskForm.vue组件调用此方法。

imports/ui/components/TaskForm.vue

...
import { Meteor } from 'meteor/meteor';

const addTask = () => {
    Meteor.call('tasks.insert', newTask.value.trim())
    newTask.value = ''
}

...

在事件内部，我们通过调用Meteor.call()将任务添加到tasks集合中。第一个参数是我们想要调用的方法的名称，第二个参数是我们想要添加的任务的文本。我们还修剪文本以删除任何额外的空格。

3.5: 首先显示最新的任务

现在您只需要进行一个更改，这将使用户感到高兴：我们需要首先显示最新的任务。我们可以通过对我们的Mongo查询进行排序来快速实现。

imports/ui/App.vue

...

const tasks = autorun(() => {
  return TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch();
}).result;

...

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

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

在下一步中，我们将更新您的任务状态并为用户提供删除任务的方式。