Блог

Главная - Вопросы по программированию - Vue, Добавление данных в локальный файл data.json (json-сервер)

Vue, Добавление данных в локальный файл data.json (json-сервер)

#vue.js #json-server

Вопрос:

Я работаю над небольшим проектом. приложение написано на vue, данные в настоящее время размещены на json-сервере.

Идея состоит в том, чтобы иметь возможность размещать новые задачи в файле данных json. обновление данных работает просто отлично, однако у меня возникли проблемы с размещением новых элементов в json.

Я вызываю handleSubmit() метод console.log() , сведения о проекте и объект проекта.

Я пытаюсь вставить Test Title и Lorem Ipsum dolor sit. , а также логическое значение, которое автоматически устанавливается в значение false.

 handleSubmit() {

    console.log(this.title, this.details)
    // console: Test Title Lorem Ipsum dolor sit.

    let project = {
        title: this.title,
        details: this.details,
        completed: false,
    }

    console.log(project)
    // console: {title: 'Test Title', details: 'Lorem Ipsum dolor sit.', completed: false}

    fetch('http://localhost:3000/projects', {
        method: 'POST',
        header: { 'Content-Type': 'application/json' },
        body: JSON.stringify(project)
    })
    //.then(() => this.$router.push('/'))
    .catch(err => console.log(err))

}

Файл data.json обновляется, но задается только идентификатор. В этом примере запись с идентификаторами 1 и 2 существовала ранее.

 [
    {
        id: 1,
        title: "Create new Homepage Banner",
        details: "Lorem Ipsum dolor sit amet goes here.",
        completed: false
    },
    {
        id: 2,
        title: "Very important E-Mail",
        details: "Someone is waiting for your response. Better get this going.",
        completed: true
    },
    {
        id: 3
    }
]

Я совсем новичок в vue и немного не понимаю, где отладить эту проблему? консоль не отвечает с ошибкой, и консоль json-сервера выводит только POST /projects 201 31.323 ms - 13

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

как только я отправил вопрос в stackoverflow, я обнаружил свою ошибку. header: { 'Content-Type': 'application/json' } должно быть headers .

В любом случае, если кто-то сможет помочь в устранении подобных проблем в будущем, я был бы очень благодарен!

Ответ №1:

как только я отправил вопрос в stackoverflow, я обнаружил свою ошибку.

header: { 'Content-Type': 'application/json' }

должно быть

headers: { 'Content-Type': 'application/json' }

Ответ №2:

Добавьте эту строку в заголовок 'Accept': 'application/json' 

 fetch('http://localhost:3000/projects', {
    method: 'POST',
    header: { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'      
    },
    body: JSON.stringify(project)
})
Метки: ,