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 是哪个版本。可能你的版本太旧了。根据this github page在版本"vue-resource": "^1.5.3"中使用this.$http.get()时，必须使用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，但我不确定。

Vue JS 数据不更新

Vue JS Data not updating

javascript

dom

vue.js

vue-resource

vuejs2