Question

如何使用 Vue 和 Fetch Api 获取 json

2019-02-23

10930

javascript vue.js

我有一个基于 Vue.js 的简单代码：

const app = new Vue({
    el: 'vue-app',
    data: {
        displayedBooks: {}
    },
    created() {
        fetch('/library').then(response => response.json())
            .then((data) => this.data.displayedBooks = data);
    }
});

但是我得到了一个异常：

Uncaught (in promise) TypeError: Cannot set property 'displayedBooks' of undefined at fetch.then.then (main.js:8)

为什么这个简单的代码不能正常工作？

Answer 1

它只是 this.displayedBooks ，而不是 this.data.displayedBooks 。Vue 数据参数中的所有内容都会直接附加到此。

Answer 2

const app = new Vue({
    el: 'vue-app',
    data: {
        displayedBooks: {}
    },
    created() {
        fetch('/library').then(response => {
            this.displayedBooks = response.data
    }, error =>{
       console.log(error)
   })
});