(VUE/NODE JS) 点击做项目并将完成状态存储到数据库答案

【问题标题】：(VUE/NODE JS) clicked to do item and store completed status to DB(VUE/NODE JS) 点击做项目并将完成状态存储到数据库
【发布时间】：2021-11-14 19:21:07
【问题描述】：

我希望单击 TODO 列表项并将状态存储在数据库 (Mongodb) 中。我正在使用 Vue js 和 Node js。点击状态变为“完成”（突破线）或“进行中”。我在网络选项卡上收到错误：“{”消息“：”找不到待办事项。“}”。此错误来自后端控制器：

exports.updateTodo = (req, res, next) => {
  const todoId = req.params.todoId;
  const completed = req.body.completed;
  Todo.findById(todoId)
  .then(todo => {
    if (!todo) {
      const error = new Error('Could not find todo.');
      error.statusCode = 404;
      throw error;
    }
    todo.completed = completed;
    return todo.save();
  })
  .then(result => {
    res.status(200).json({ message: 'Todo updated!', todo: result });
  })
  .catch(err => {
    if (!err.statusCode) {
      err.statusCode = 500;
    }
    next(err);
  });
};

后端路由器：

router.put('/:todoId', todoController.updateTodo);

前端模板：

<template>
  <div class="hello">
    <div class="todos" id="app">
      <h3 class="todos__title">
        Todo List - VueJS
        <span v-show="itemsTodo.length"> ({{ itemsTodo.length }} pending)</span>
      </h3>
      <input
        class="todos__input"
        type="text"
        @keyup.enter="addTodo"
        v-model="newTodo"
        placeholder="Type and press enter..."
      />
      <ul class="todos__list">
        <li
          class="todos__item"
          v-for="todo in todos"
          :key="todo._id"
          :class="{ todos__completed: todo.completed }"
          @click="todo.completed = !todo.completed; updateTodo(todo)"
          transition="fade"
        >
          <button class="todos__delete" @click.stop="removeTodo(todo._id)">
            &times;</button
          >
          {{ todo.text }}
        </li>
      </ul>
      <p class="todos__empty" v-show="!todos.length">
        Nothing to do... yet!
      </p>
      <a
        class="todos__clear"
        href="#"
        @click.prevent="clearCompleted"
        v-show="itemsDone.length"
        >Clear completed tasks</a
      >
    </div>
  </div>
</template>

还有 updateTodo 方法：

 updateTodo(todo) {
      const todoStatus = { completed: todo.completed };
      axios.put(`http://localhost:3000/todos/${todo._id}`, todoStatus)
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        })
    },

关于后端配置的模型架构：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const todoSchema = new Schema({
 text: {
  type: String,
  required: true
 },
 completed: {
  type: Boolean
 }
},
{ timestamps: true });

module.exports = mongoose.model('Todos', todoSchema);

节点 js 终端中的错误：

【问题讨论】：

你能提供来自服务器的todo 的输出吗？
我可以添加一个新的待办事项，它会出现在屏幕上并存储到服务器中。 node js 终端出错我马上编辑帖子。
不，在if (!todo) 行之前添加console.log(todo) 并显示输出
现在正在工作，只是自己想通了。问题出在 axios 响应中的 Vue updateTodo 方法中。我添加了一个代码：“const todo = { _id: resData.todo._id, completed: resData.todo.completed, } return todo;”非常感谢您的帮助和时间！
不要在问题部分包含解决方案 - 而是在下面发布作为自我回答，以使该问题的未来访问者更容易看到解决方案，并更好地遵守 Stack Overflow 的问答格式。

标签： javascript node.js mongodb vue.js

【解决方案1】：

已解决的更新： 问题出在 axios 响应的 Vue 方面，我添加了以下代码：

const todo = {
  _id: resData.todo._id,
  completed: resData.todo.completed,
}
return todo;

希望有一天能帮助到某人！

【讨论】：