Запрос API от компонента Vuejs выполняется дважды

Question

Я создаю приложение To-do, используя Vuejs, Expressjs и Mongodb.

Я уже написал через Новый компонент с отдельной ссылкой. Это нормально, но в настоящее время я использую новый компонент, импортируя его в корневой компонент без каких-либо дополнительных ссылок.

Это работает, но запрос API выполняется дважды. (Две статьи написаны.)

Я только что импортировал компонент, в чем проблема?

Я только отправил один запрос, но, как ни странно, два ответа летят. (идентификатор отличается, заголовок и содержание одинаковы.)

интерфейс / компоненты / TodoForm.vue

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

<script>

export default {
  data: function () {
    return {
      todo: {}
    }
  },
  methods: {
    create: function() {
      this.$http.post('/api/todos/create', this.todo)
      .then(
        (response) => {
          console.log(response.data)
          this.$router.push({name: 'Todo', params: { id: response.data._id }})
        },
        (err) => {
          alert('Error')
        }
      )
      .catch(function (error) {
        alert('error')
      })
    }
  }
}
</script>

fromtend / компоненты / TodoList.vue

<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)
  });
});

Answer 1

Попробуйте изменить следующий код:

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