使用 vue-resource 更新数据

Question

在我的 Vue 组件中，我有以下数据：

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

此外，还有一种使用vue-resource获取数据的方法：

    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);
        });
    },

如您所见，此方法应该更新labels和datasets ，但由于某种原因它们仍然是空字符串（ '' ），它们仍然具有默认值。

例如，我还有以下方法应该使用这些数据来生成图表：

    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
        });
    },

最后：

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

我的图表是空的，使用fetchData方法后this.labels和this.datasets仍然是空的。

这是完整的组件：

<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

似乎vue-resource内部的范围已更改，因此它没有更新vue数据变量，请尝试以下操作：

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);
    });
},

另一种方法是使用this.$set ，如此处文档中所述。

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))
    });
},

---

已编辑

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

您将无法在此处看到数据，因为fetchData是一个异步函数，因此在执行这些控制台日志时不会填充数据，但是您可以在模板中使用这些变量，它们会尽快呈现随着数据的填充，或者您可以按照评论中的建议使用nextTick来控制台记录数据。