Блог

У меня есть функция списка задач в моем интерфейсе, вот демонстрация: https://gyazo.com/a10fcd7c470439fe5cc703eef75b437f

Все это обновляется с использованием массива в компоненте Vue, а затем с использованием v-models для отслеживания данных и изменения пользовательского интерфейса для отражения этого массива.

Когда пользователь нажимает «отправить», я хочу, чтобы он отправлял данные в базу данных.

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как импортировать вновь созданные «задачи» (текстовое поле и флажок, которые создаются при нажатии кнопки ) в базу данных.

Так выглядит каждый документ списка задач в моей коллекции «списки задач» в mongo:

 {
    "_id":"5caca1498accb128c8974d56",
    "title":"todolist1 11111 11111 11111 11111",
    "userEmail":"test@gmail.com",
    "todos":[
        {
            "_id":"5caca1498accb128c8974d57",
            "description":"Get this done",
            "completed":true}
    ],
    "dateDue":"2019-04-07T18:24:31.207Z",
    "__v":0
}
  

Кнопка «сохранить» в демонстрации имеет атрибут v-on: click с именем функции saveTodoList() , которая затем отправляет запрос axios post на маршрут /updateTodoList

Не стесняйтесь задавать любые вопросы, которые помогут вам ответить на мой вопрос 🙂

Когда новое задание сохраняется после нажатия кнопки «Плюс», сделайте запрос /updateTodoList с родительским документом _id . Итак, ваш запрос может выглядеть примерно так:

Публикация /updateTodoList :

Тело:

 { "_id": "5caca1498accb128c8974d56",
  "todo": {
     "description": "This is a newly added todo description",
     "completed": false
   }
}
  

Затем на стороне сервера проанализируйте этот объект body и обновите документ с _id помощью сопоставления и вставьте новое задание в документ. Ваш запрос будет выглядеть примерно так:

 todolist.findOneAndUpdate({_id: req.body._id}, { $push: {todos: req.body.todo } })
  

Надеюсь, это поможет.

Редактировать:

Каждый раз, когда вы отправляете задачу, используя приведенный выше запрос, mongo вставляет этот элемент в массив задач. Для отправки нескольких задач в одном запросе используйте $each operator вместе с $push . Официальная документация здесь.