Question

我正在使用Vuejs，Expressjs和Mongodb创建待办事项应用程序。

我已经用一个单独的链接写完了新组件。这是正常现象，但是我目前正在通过将New Component导入到Root Component中来使用New Component，而没有任何其他链接。

这有效，但是API请求执行了两次。（写了两篇文章。）

我刚刚导入了组件，这是什么问题？

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

frontend / components / 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 / components / 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>

后端/ API

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>

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

1 个答案: