Mongodb 来自Vuejs组件的API请求执行两次

我正在使用Vuejs、Expressjs和Mongodb创建To-do应用程序

我已经通过一个单独的链接完成了新组件的编写。这是正常的，但我目前正在使用新组件，将其导入根组件，而无需任何附加链接

这是可行的，但是API请求执行了两次。写了两篇文章

我刚导入组件，有什么问题吗

我只发送了一个请求，但奇怪的是有两个响应在飞。id不同，标题和内容相同

前端/组件/TodoForm.vue

---

尝试更改以下代码：

<template>
  <form>
    title : <input v-model="todo.title">
    content : <input v-model="todo.content">
    <button v-on:click.once="create" >Create</button>
  </form>
</template>

---

你有没有尝试过像那样添加事件处理一次？我从来没有使用过预防。它有效吗？预防和一次无效。啊！我发现了一个问题。我为表单和按钮注册了一个创建事件。这是我的错误。谢谢您的回答。@COLEAN，如果您觉得有答案解决了问题，请单击绿色复选标记将其标记为“已接受”。这有助于将注意力集中在仍然没有答案的老年人身上。

<template>
  <todo-form/>

  <div class="todos">
    <h1>Todos</h1>
    <div v-for="todo in todos" v-bind:key="todo" class="todo">
      <div>
        <strong>{{todo.title}}</strong>
        <router-link :to="{ name: 'Todo', params: { id: todo._id }}">detail</router-link>
        <router-link :to="{ name: 'Edit', params: { id: todo._id }}">edit</router-link>
        <button type="submit" @click="deleteTodo(todo._id)">Delete</button>
      </div>
    </div>
  </div>
</template>

<script>
import TodoForm from './TodoForm';

export default {
  data () {
    return {
      todos: {}
    }
  },
  created () {
    this.$http.get('/api/todos')
    .then((response) => {
      this.todos= response.data
    })
  },
  components: {
    TodoForm
  },
  methods: {
    deleteTodo (id) {
      const targetIndex = this.todos.findIndex(v => v._id === id)
      this.$http.delete(`/api/todos/${id}`)
      .then((response) => {
        this.todos.splice(targetIndex, 1)
      })
    }
  }
}
</script>

router.post ('/create', (req, res) => {
  let todo = new Todo({
    title: req.body.title || req.body.todo.title,
    content: req.body.content || req.body.todo.content
  });

  todo.save((err) => {
    if (err) {
      res.status(500).send('Something broke!');
    }
    res.json(todo)
  });
});

<template>
  <form>
    title : <input v-model="todo.title">
    content : <input v-model="todo.content">
    <button v-on:click.once="create" >Create</button>
  </form>
</template>