javascriptvue.jsdomvuejs2vue-resource

Vue JS Data not updating


I have the following code in 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)
  }

I don't know why the properties array is not being updated. I can see that the API is returning the properties correctly and if I debug the script in chrome, the correct data is indeed assigned to this.properties in the callback.

I added the debugText in there and it is also not updated.

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

This code has not had any changes for the pass two years and it failed today - I'm not sure whats going on here?


Solution

  • I don't know which version of vue-resource you are using. Maybe your version is old. According to this github page when you use this.$http.get() in version "vue-resource": "^1.5.3", you must use response.body to get data. I am not sure that this is the reason that your code is not working, But this code works fine for me:

    <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>

    Maybe for your data, you should call r.body.data.properties, But I am not sure.