Javascript vue.js组件中的Chart.js图表未更新

我正在使用vue.js和chart.js为一些加密投资组合开发一个可视化模块，但目前我一直在做这件事：

将显示空图表，但会呈现非空的值

由于这些值是在图表初始化后动态加载的，因此我认为图表没有正确更新自身（即使我调用了.update（）），但不会显示任何错误

我将chart.js呈现包装在vue组件中：

Vue.component('portfolioValues', {
    template: '<canvas width="400" height="200"></canvas>',
    data: function() {
        return {
            portfolio_value: [],
            portfolio_labels: [],
            chart: null,
        }
    },
    methods: {
        load_portfolio_value_local: function() {
            values = [];
            labels = []
            local_data.forEach(element => {
                values.push(element.total_usd);
                labels.push(moment(element.timestamp, 'X'));
            });
            this.portfolio_value = values;
            this.portfolio_labels = labels;
            this.chart.update();
        },

        render_chart: function() {
            this.chart = new Chart(this.$el, {
                type: 'line',
                data: {
                    labels: this.portfolio_labels,
                    datasets: [{
                        label: "Portfolio Value",
                        data: this.portfolio_value,
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'linear',
                        }]
                    }
                }
            });
        }
    },
    mounted: function() {
        this.render_chart();
        this.load_portfolio_value_local();
    }
});

以下是完整的演示代码：

---

知道为什么不渲染数据吗？谢谢

这里的问题是vuejs如何处理其

数据

如果您这样使用它：

local_data.forEach(element => {
    this.portfolio_value.push(element.total_usd);
    this.portfolio_labels.push(moment(element.timestamp, 'X'));
});

this.chart.update();

图表将更新。但是通过重新初始化阵列，您可以使用vuejs

TL；博士

如果要重新初始化对象，可以将数组指定给该对象：

Object.assign(this.portfolio_value, values);
Object.assign(this.portfolio_labels, labels);

这样，链接将保持工作状态

Object.assign(this.portfolio_value, values);
Object.assign(this.portfolio_labels, labels);