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?

• ceejayoz: It'd just be this.displayedBooks, not this.data.displayedBooks. Everything in your Vue data parameter gets attached to this directly.
• Terry: This is a plain typo: it should be this.displayedBooks = data :)
• WillC: 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.
• Aleks Be: 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

Answer 1

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

Answer 2

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