Update data using vue-resource

Question

In my Vue component I have the following data:

data() {
    return {
        revenueChart: '',
        limit: 12,
        labels: '',
        datasets: ''
    }
},

Also, there is one method that uses vue-resource to fetch the data:

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

As you can see, this method should update labels and datasets , but for some reason they are still empty strings ( '' ), they still have the default values.

For example, I also have the following method that should use these data to generate a graph:

    generateGraph() {
        var data = {
            labels: this.labels, // HERE
            datasets: [
                {
                    label: "Revenue",
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    data: this.datasets // AND HERE
                }
            ]
        };

        var ctx = this.$refs.canvas.getContext('2d');
        this.revenueChart = new Chart(ctx, {
            type: 'line',
            data: data
        });
    },

Finally:

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

My graph is empty, after using the fetchData method this.labels and this.datasets are still empty.

Here is the complete component:

<template>
    <div>
        <label>How Many Days?</label>
        <select v-model="limit">
            <option v-for="n in 12">{{ n }}</option>
        </select>
        <canvas ref="canvas"></canvas>
    </div>

</template>

<script>
    export default {
        props: {
            url: ''
        },

        data() {
            return {
                revenueChart: '',
                limit: 12,
                labels: '',
                datasets: ''
            }
        },

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

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

            generateGraph() {
                var data = {
                    labels: this.labels,
                    datasets: [
                        {
                            label: "Revenue",
                            backgroundColor: "rgba(75,192,192,0.4)",
                            borderColor: "rgba(75,192,192,1)",
                            data: this.datasets
                        }
                    ]
                };

                var ctx = this.$refs.canvas.getContext('2d');
                this.revenueChart = new Chart(ctx, {
                    type: 'line',
                    data: data
                });
            }
        }
    }
</script>

Answer 1

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.