[Vuejs]-Update data using vue-resource

by

0👍

It seems that scope has been changed inside vue-resource, due to which it is not updating vue data variables, try following:

fetchData() {
    var self = this
    this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
        self.labels = Object.keys(response.data);
        self.datasets = Object.values(response.data);
    });
},

An alternate way can be to use this.$set, as it is described in the documentation here.

fetchData() {
    this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
        this.$set(labels, Object.keys(response.data))
        this.$set(datasets, Object.values(response.data))
    });
},

Edited

mounted() {
    this.fetchData();
    console.log(this.labels); // STILL EMPTY !
    console.log(this.datasets); // STILL EMPTY !
    this.generateGraph();
},

You will not be able to see the data here, as fetchData is an async function, so data will not be populated by the time these console log will be executed, but you can use these variables in the template, and they will render as soon as data is populated, or probably you can use nextTick as suggested in the comments to console log the data.

Leave a comment