使用 vue-resource 更新数据

Posted 2023-02-23

【中文标题】使用 vue-resource 更新数据

【英文标题】：Update data using vue-resource

【发布时间】：2017-04-09 08:29:13

【问题描述】：

在我的 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>

【问题讨论】：

也许尝试使用 nextTick 函数？

【参考方案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，如文档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))
    );
,

---

已编辑

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

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

【讨论】：

我都试过了，都不行，问题是一样的。

@PeraMika 你能看到response 通过日志记录填充到$http.get，它需要JSON 解析吗？

没关系..它可能与nextTick有关（正如claudios在此建议：***.com/questions/40796499/…）。

@PeraMika 是的，你是对的，它不会像你试图做的那样立即打印，因为fetchData 是一种异步方法。更新了答案。