Javascript Vue未加载数据

我有一个vue/coffeescript应用程序，看起来像这样：

控制台中没有错误，它说它正在对JSON发出成功的外部请求，但是当我说

{{{book.name}}

时，它只作为测试返回，而不是来自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
}

})

---

我不知道如何在coffeescript中执行此操作，但我认为问题在于

this

没有引用回调函数中的Vue，因此设置

this.book

不起作用。通常，您可以在函数上使用

.bind（this）

修复此问题，或者在ajax调用之前设置

var vm=this

，并在回调中设置

vm.book

。

我不知道如何在coffeescript中执行此操作，但我认为问题在于

this

没有在回调函数中引用Vue，所以设置

这本.book

不起作用。通常，您可以使用函数上的

.bind（this）

修复此问题，或者在ajax调用之前设置

var vm=this

，并在回调中设置

vm.book

。

感谢您的回复。我已经尝试过这样做（在ajax函数之外设置

that=this

），但似乎没有改变这种情况？啊，但是您在发送http请求后立即调用

console.log（）

，而不是等待书籍返回。尝试将书本记录到回调函数中，它应该是正确的。当我将它记录到回调函数中时，它是正确的，我的问题是，

{{book.name}}

在ajax请求完成后不会更新。它仍然不会更新吗？该值仍显示为默认值“Test”。然而，当我使用console.log（this.book）时，它显示了JSON它应该显示的内容。好吧，对不起，我想我已经得到了它。。。尝试

self.$set（'book'，data）

。Vue的反应功能绑定到原始的

book

对象，因此当您替换它时，您绕过了ListenerSthank以获得回复。我已经尝试过这样做（在ajax函数之外设置

that=this

），但似乎没有改变这种情况？啊，但是您在发送http请求后立即调用

console.log（）

，而不是等待书籍返回。尝试将书本记录到回调函数中，它应该是正确的。当我将它记录到回调函数中时，它是正确的，我的问题是，

{{book.name}}

在ajax请求完成后不会更新。它仍然不会更新吗？该值仍显示为默认值“Test”。然而，当我使用console.log（this.book）时，它显示了JSON它应该显示的内容。好吧，对不起，我想我已经得到了它。。。尝试

self.$set（'book'，data）

。Vue的反应式功能绑定到原始的

book

对象，因此，当您替换它时，您就绕过了侦听器