Vue JS 數據未更新

Question

我在 Vue JS V2 中有以下代碼：

data() {
  return {
    properties: [],
    loading: true,
    showProgressBars: true,
    debugText: 'This is start'
  }
},
methods: {
  get() {
    const success = (r) => {
      this.properties = r.data.properties
      this.loading = false
      this.debugText = 'api has returned success'
    }
    const error = (r) => {
      console.error(r)
    }

    var resourceUri = `/api/v1/properties`

    this.$http
      .get(resourceUri)
      .then(success, error)
  }

我不知道為什么屬性數組沒有被更新。 我可以看到 API 正在正確返回屬性，如果我在 chrome 中調試腳本，正確的數據確實分配給回調中的this.properties 。

我在那里添加了debugText ，它也沒有更新。

<p>{{debugText}}</p>

這段代碼在過去的兩年里沒有任何變化，今天它失敗了——我不確定這里發生了什么？

Answer 1

我不知道您使用的是哪個版本的vue-resource 。 可能你的版本太舊了。 根據這個 github 頁面當你使用this.$http.get() in version "vue-resource": "^1.5.3" ，你必須使用response.body來獲取數據。 我不確定這是否是您的代碼無法正常工作的原因，但是此代碼對我來說可以正常工作：

 <template> <h1>API page</h1> </template> <script> export default { name: "Apicall", data() { return { properties: [], loading: true, showProgressBars: true, debugText: 'This is start' } }, methods: { get() { const success = (r) => { console.log(r.body); this.properties = r.body this.loading = false this.debugText = 'api has returned success' } const error = (r) => { console.error(r) } var resourceUri = `https://jsonplaceholder.typicode.com/users` this.$http.get(resourceUri).then(success, error) }, }, mounted: function() { this.get(); } } </script> <style scoped> </style>

也許對於您的數據，您應該調用r.body.data.properties ，但我不確定。