Vue not loading data

Question

I have a vue/coffeescript app that looks like this:

There are no errors in the console, and it says it's making a successful external request for the JSON, however When I say {{book.name}}, it only returns as Test instead of coming from the JSON.

new Vue({
el: '#app',
data: {
  showModal: false,
  book: {
    name: "Test",
    description: "",
    photo: ""
  }
}

ready: () ->
  this.getBookData()
  console.log (this.book)

methods: {
  getBookData: () ->
    self = $(this)
    $.getJSON 'GGPK4A.json', (data) ->
      self.book = data
}

})

Jeff · Accepted Answer · 2016-04-21 22:11:46Z

2

I don't know how to do it in coffeescript, but I think the issue is that this doesn't refer to Vue within the callback function, so setting this.book isn't working. Normally you can fix this using .bind(this) on the function, or setting var vm = this before the ajax call and setting vm.book in the callback.

answered Apr 21, 2016 at 22:11

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

6 Comments

the_ Over a year ago

thanks for the reply. I already tried to do this (setting that = this outside of the ajax function), but it doesn't seem to change the situation?

Jeff Over a year ago

Ah, but you are calling console.log() immediately after sending the http request, not waiting for the book to come back. try logging the book in the callback function, it should be correct.

the_ Over a year ago

it is correct when I log it in the callback function, my issue is that {{book.name}} doesn't update once the ajax request is done.

the_ Over a year ago

it still doesn't update? The value is still display as "Test", the default. When I console.log(this.book) however, it shows the JSON its supposed to be showing

Jeff Over a year ago

Ah ok sorry I think I've got it... try self.$set('book', data). Vue's reactive capabilities are bound to the original book object, so when you replace it you're circumventing the listeners

|

Collectives™ on Stack Overflow

Vue not loading data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related