Однако при попытке реактивного обновления данных диаграммы эти изменения не отражаются.Vue.js

Question

К сожалению, я снова сталкиваюсь с некоторыми проблемами с реактивностью Vue.js.В настоящее время мой код отображает диаграмму один раз на mounted(), а затем повторно отображает диаграмму каждый раз, когда данные обновляются благодаря наблюдателю.Это работает (за исключением того факта, что я не уверен, как удалить ранее отображенные графики), однако я не уверен, что это правильный способ сделать обновление, учитывая, что я использую Vue.Мне кажется, что уже обновленное обновление диаграммы при обновлении данных лучше, чем рендеринг целого нового графика и удаление старого.

Я попытался изменить данные с помощью this.data = the new data, однако я знаю, чтоэто не сделает объект реактивным.Я также пытался использовать это. $ 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

Попробуйте использовать Deep Watcher на данных.

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

Кстати, сложно иметь свойство data с именем data ... Я предлагаю изменить его на chartData.

В Vue только свойства объекта верхнего уровня будут вызывать реактивные изменения. deep заставит вложенные объекты (в вашем случае labels и datasets) также вызвать обновление. В большинстве случаев не требуется глубокий анализ, поэтому для устранения накладных расходов необходимо добавить его, если хотите.

Убедитесь, что вы не добавляете никаких новых свойств в существующий объект данных, не пройдя Vue.set. Это следующая наиболее распространенная проблема, когда пользовательский интерфейс не обновляется до изменений данных.

Answer 2

От: 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]
                }],
            })