但是，尝试响应式更新图表数据时，图表并未反映更改。 Vue.js

Question

遗憾的是，我又遇到了一些 Vue.js 反应性问题。目前，我的代码在mounted() 上渲染一次图表，然后每次数据更新时都会重新渲染图表，这要感谢观察者。这确实有效（除了我不确定如何删除以前渲染的图表这一事实），但是，考虑到我使用的是 Vue，我不确定这是否是进行更新的正确方法。对我来说，在数据更新时更新已经渲染的图表似乎是一个更好的选择，而不是渲染一个全新的图表并删除旧的图表。

我尝试使用this.data = the new data 更改数据，但是，我知道这不会使对象反应。我也尝试使用 this.$set ，如此处所述 - https://vuejs.org/v2/guide/reactivity.html ，但是，我没有用它实现任何目标。我可能没有正确使用它。我还尝试仅更改对象的一个​​属性，该属性也不会影响图表。

<template>
    <div id="app">
        <button @click="updateChart()">X</button>
        <canvas id="myChart"></canvas>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3]
                }],
            }
        }
    },
    methods: {
        updateChart(){
            this.data = {
                labels: ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'],
                datasets: [{
                    label: 'EYOOOOOOOOOOOOOO',
                    data: [6, 7, 8, 9, 10, 11]
                }],
            }
            /*this.$set(this.data, {
                labels: ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'],
                datasets: [{
                    label: 'Please Work',
                    data: [6, 7, 8, 9, 10, 11]
                }],
            }))*/
            /*this.$set(this.data, 'labels', ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'])*/
        },
        renderChart(data, options){
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: options
            });
        }
    },
    mounted() {
        this.renderChart(this.data, this.options)
    },
    watch: {
        data: function() {
            this.renderChart(this.data, this.options)
        }
    }
}

Answer 1

发件人：https://vuejs.org/v2/guide/reactivity.html

有时您可能希望将多个属性分配给现有的 对象，例如使用 Object.assign() 或 _.extend()。然而，新 添加到对象的属性不会触发更改。在这样的 情况下，创建一个新对象，其属性来自原始对象 对象和mixin对象：

尝试通过以下方式更新您的this.data：

this.data = Object.assign({}, {
                labels: ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'],
                datasets: [{
                    label: 'Please Work',
                    data: [6, 7, 8, 9, 10, 11]
                }],
            })

Answer 2

尝试对数据使用深度观察者。

{
  watch: { 
    data: {
      handler: function(value) {
        this.renderChart(this.data, this.options)
      },
      deep: true,
    }
  }
}

顺便说一句，拥有一个名为 data 的 data 属性令人困惑...我建议将其更改为 chartData。

在Vue 中，只有顶级对象属性会触发响应式更改。 deep 将导致嵌套对象（在您的情况下为 labels 和 datasets）也触发更新。大多数情况下不需要深，因此要消除开销，您需要根据需要添加它。

确保在不通过Vue.set 之前不要向现有数据对象添加任何新属性。当 UI 不更新数据更改时，这是下一个最常见的问题。