How to get json with Vue and Fetch Api

Question

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?

It'd just be this.displayedBooks, not this.data.displayedBooks. Everything in your Vue data parameter gets attached to this directly. — ceejayoz
– ceejayoz, Commented Feb 23, 2019 at 19:19
This is a plain typo: it should be this.displayedBooks = data :) — Terry
– Terry, Commented Feb 23, 2019 at 19:21
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
– WillC, Commented Feb 23, 2019 at 23:23
Here, in comments a got a all answers! Use this.displayedBooks and don't forget about store context with var self = this in created() function — Aleks Be
– Aleks Be, Commented Feb 24, 2019 at 6:16

Aleks Be · Accepted Answer · 2019-02-26 09:58:41Z

2

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

answered Feb 26, 2019 at 9:58

Aleks Be

731 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MisterJames · Accepted Answer · 2020-12-09 14:19:38Z

1

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

edited Dec 9, 2020 at 14:19

MisterJames

3,3261 gold badge32 silver badges49 bronze badges

answered May 8, 2020 at 17:50

Masterdash

365 bronze badges

Collectives™ on Stack Overflow

How to get json with Vue and Fetch Api

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related