I have a simple code based on Vue.js:

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

But I got an exception:

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

Why this simple code is not works well?

I have a simple code based on Vue.js:

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

But I got an exception:

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

Why this simple code is not works well?

• javascript
• vue.js

• 4 It'd just be this.displayedBooks, not this.data.displayedBooks. Everything in your Vue data parameter gets attached to this directly. – ceejayoz Commented Feb 23, 2019 at 19:19
• 3 This is a plain typo: it should be this.displayedBooks = data :) – Terry Commented Feb 23, 2019 at 19:21
• 1 Another gotcha can be that "this" in this.data.displayedBooks can be the Ajax library and not the Vue instance. If this is the problem then define: var vm = this; then use vm.data.displayedBooks for where to pass the data back to. – WillC Commented Feb 23, 2019 at 23:23
• Here, in ments a got a all answers! Use this.displayedBooks and don't forget about store context with var self = this in created() function – Aleks Be Commented Feb 24, 2019 at 6:16

2 Answers 2

It'd just be this.displayedBooks, not this.data.displayedBooks. Everything in your Vue data parameter gets attached to this directly.

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