Vue-ChartJS - Круговая структура в JSON

Question

Я использую Vue-Chartjs lib и пытаюсь составить линейный график. Ну, я сделал это с помощью этого кода ниже, это работает! График нарисован. Но когда я изменяю значение любой переменной внутри моего Vue Data (Как это test вход, в примере.). Это подтверждает эту ошибку в консоли. Я думаю, что это из-за VueChartJS, потому что, если я удаляю граф, все работает хорошо.

TypeError: Преобразование круговой структуры в JSON

line.js

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

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

dashboard.vue

<line-chart :chart-data="dataCollection" :height="100"></line-chart>
 <input v-model="test">

   import LineChart from './line-chart.js';
   export default {
      components: {LineChart},
      data: () => ({ 
         dataCollection:  {},
         test: "some input" 
      }),
      created () { 
         this.dataCollection =  {
                  "labels": ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00"],
                  "datasets": [{
                     "label": "Test",
                     "backgroundColor": "#00CC6A",
                     "borderColor": "#00CC6A",
                     "data": [0, 23, 51.75, 27, 34, 12]
                  }]
               }
        }
    }

Что я делаю неправильно?

Спасибо!! знак равно

Answer 1

Я предполагаю, что проблема с вашей песочницей в том, что вы пытаетесь вывести коллекцию данных в шаблон.

Если объект данных chart.js содержит круговую структуру (ссылающуюся на объект где-то в дочернем объекте), это может привести к ошибке.

Потому что, если вы распечатываете объект в шаблоне vue, vue использует JSON.stringify() в фоновом режиме. Который не может разрешить круговые структуры.