Бесконечный цикл при использовании вычисляемого свойства с Vue Chart js

Question

Я пытаюсь обновлять свой график каждые 5 секунд новыми данными из вызова API. Моя диаграмма обновляется, но каждую точку рендерит сотни раз. Я проверил логи, и они показывают, что возникает бесконечный цикл, и я не уверен, как решить эту проблему. Ниже мой текущий код:

Примечание: prop 'graphData' - это массив, который я передаю от Parent, то есть данные из вызова API, которые я хочу добавить в диаграмму

ChildComponent.vue

<template>
<div class="graphCard">
    <Linechart :chartData="dataCollection" :options="options" />
</div>
</template>


<script>
import Linechart from '@/utils/Linechart.js'

export default {
components: {
    Linechart
},
props: ['graphData'],
data() {
    return {
        collection: []
    }
},  
computed: {       
    dataCollection() { 
        this.collection.push(this.graphData[0])
        return { 
            datasets: [
                    {
                    label: 'chart',
                    backgroundColor: 'indigo',
                    borderColor: 'indigo',
                    fill:false,
                    showLine: true,
                    data: this.collection
                    }]
        }    
},
options() {
        return {
            id: 'Cumulative',
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution: 'series',
                    time: {
                        displayFormats: {
                            millisecond: 'mm:ss:SS',
                            quarter: 'MMM YYYY'
                        } 
                    }
                }],
                yAxes: [{
                    ticks: {
                        //beginAtZero: true
                    }
                }]
            }
        }
    }

LineChart.js

import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Scatter,
    mixins: [reactiveProp],
    props: ['chartData', 'options'],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
}

В альтернативном подходе я также попытался установить dataCollection и параметры как «data» вместо «computed», с наблюдателем на подпорке graphData, но диаграмма не обновилась и столкнулась с проблемой «Uncaught TypeError: Cannot» прочитать свойство 'skip' из undefined '

Answer 1

Обычно computed лучше, чем watcher, но я не уверен, что смогу отладить этот бесконечный цикл без дополнительного контекста. Итак, вот альтернатива data + watch, которая должна работать.

Код:

<template>
<div class="graphCard">
    <Linechart :chartData="dataCollection" :options="options" v-if="dataCollection.datasets[0].data.length"/>
</div>
</template>

<script>
import Linechart from '@/utils/Linechart.js'

export default {
    components: {
        Linechart
    },
    props: ['graphData'],
    data() {
        return {
            dataCollection: {
                datasets: [{
                    label: 'chart',
                    backgroundColor: 'indigo',
                    borderColor: 'indigo',
                    fill:false,
                    showLine: true,
                    data: []
                    }]
            },
            options: {
                id: 'Cumulative',
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'series',
                        time: {
                            displayFormats: {
                                millisecond: 'mm:ss:SS',
                                quarter: 'MMM YYYY'
                            }
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            //beginAtZero: true
                        }
                    }]
                }
            }
        }
    },
    watch: {
      graphData (newData) {
        this.dataCollection.datasets[0].data.push(newData[0])
      }
    }
}

Answer 2

@ BTL вывел меня на правильный путь с подходом, но некоторые проблемы все еще препятствовали корректному обновлению графика.Кажется, что данные диаграммы не могут корректно обновляться, если новые данные помещаются непосредственно в набор данных.Что сработало для меня:

watch: {
    graphData (newData) {
        currentDataList.push(newData[0])
        this.dataCollection = { 
            datasets: [{
                label: 'label',
                backgroundColor:'red',
                borderColor: 'red',
                fill:false,
                showLine: true,
                lineTension: 0,
                data: currentDataList
            }]
        }
    }
}