Vue，将数据添加到本地 data.json 文件（json-服务器）

Question

我正在做一个小项目。该应用程序是用 vue 编写的，数据目前由 json-server.

托管

这个想法是能够post 新的待办事项进入json 数据文件。更新数据工作得很好，但是我在 posting 新元素到 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 文件已更新，但仅设置了 id。在此示例中，id 为 1 和 id 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

编辑：

当我将问题提交给 Whosebug 时，我发现了我的错误。 header: { 'Content-Type': 'application/json' } 应该是 headers.

无论如何，如果有人能够帮助解决以后类似的问题，我将不胜感激！

Answer 1

当我将问题提交到 Whosebug 时，我发现了我的错误。

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

应该是

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

Answer 2

将此行添加到 header 'Accept': 'application/json'

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

Vue，将数据添加到本地 data.json 文件（json-服务器）

Vue, Adding Data to local data.json file (json-server)

vue.js

json-server

编辑：