编辑不适用于使用Vue＆Express和Mongo创建的CRUD

Question

我正在使用Vue.js，Express.js和Mongoose制作CRUD应用程序。

我创建了CRD，但“更新”事件在“编辑”组件中无法正常工作。

我试图找到一个长期存在的问题，但无法解决。

请帮助我！

Main.vue

...
<router-link :to="{ name: 'Edit', params: { id: todo._id }}">Edit</router-link>
...

EditForm.vue

<template>
  <div id="todo-edit-form">
    <div> Edit </div>
    title : <input :value="todo.title"> <br />
    content : <input :value="todo.content"> <br />
    <button @click="update(todo._id)" >Edit</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      todo: []
    }
  },
  created () {
    let id = this.$route.params.id
    this.$http.get(`/api/todos/edit/${id}`)
    .then((response) => {
      this.todo = response.data
    })
  },
  methods: {
    update (id) {
      this.$http.put(`/api/todos/${id}`, {
        todo: this.todo
        })
      .then(
        (response) => {
          // confirmed that the response contains the original title and content, not the modified content.
          this.$router.push('/todos')
        },
        (err) => {
          alert('Error')
        }
      )
      .catch(function (error) {
        alert('error')
      })
    }
  }
}
</script>

更新api

router.put('/:id', (req, res) => {
  Todo.findByIdAndUpdate(req.params.id, { $set: req.body }, (err, todo) => {
    if (err) {
      res.status(500).send('Something broke!');
    }
    res.json(todo);
  });
});