但是，嘗試響應式更新圖表數據時，圖表並未反映更改。 Vue.js

Question

可悲的是，我再次面臨一些 Vue.js 反應性問題。 目前，我的代碼在mounted()上渲染圖表一次，然后每次數據更新時重新渲染圖表，這要歸功於觀察者。 這確實有效（除了我不確定如何刪除以前渲染的圖表這一事實），但是，考慮到我使用的是 Vue，我不確定這是否是進行更新的正確方法。 對我來說，在數據更新時更新已經渲染的圖表似乎是一個更好的選擇，而不是渲染一個全新的圖表並刪除舊的圖表。

我嘗試使用this.data = the new data更改數據，但是，我知道這不會使對象反應。 我也嘗試使用 this.$set ，如此處所述 - https://v2.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 ://v2.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 不更新數據更改時，這是下一個最常見的問題。