Vue没有加载数据

Posted 2023-02-22

【中文标题】Vue没有加载数据

【英文标题】：Vue not loading data

【发布时间】：2016-08-15 07:57:45

【问题描述】：

我有一个看起来像这样的 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


)

【参考方案1】：

我不知道如何在 coffeescript 中执行此操作，但我认为问题在于 this 没有在回调函数中引用 Vue，因此设置 this.book 不起作用。通常你可以在函数上使用.bind(this)来解决这个问题，或者在ajax调用之前设置var vm = this并在回调中设置vm.book。

【讨论】：

感谢您的回复。我已经尝试过这样做（在 ajax 函数之外设置 that = this），但似乎并没有改变这种情况？

啊，但是您在发送http请求后立即调用console.log()，而不是等待书回来。尝试在回调函数中记录书籍，应该是正确的。

在回调函数中记录是正确的，我的问题是book.name在ajax请求完成后不会更新。

还不更新？该值仍显示为“测试”，默认值。但是，当我使用 console.log(this.book) 时，它会显示它应该显示的 JSON

啊，好吧，对不起，我想我明白了……试试self.$set('book', data)。 Vue 的反应能力绑定到原始的 book 对象，所以当你替换它时，你绕过了监听器