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的{{1}}属性是令人困惑的...我建议将其更改为data。

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

确保不经过datasets，不要将任何新属性添加到现有数据对象。当UI不更新为数据更改时，这是下一个最常见的问题。

尝试以被动方式更新统计图数据，但是该统计图不能反映所做的更改。 Vue.js

2 个答案: