用Vue使用ChartJS得到了“超出最大调用堆栈大小”

Question

我想从父级传递数据到GrandChild（图表），因此我使用道具。

这是父

的“kalkulator数据”的组件工作，它是用来将数据添加到父。

<template> 
    <div class="container"> 
     <div class="row"> 

       <kalkulator-data 
        :saldoAwal="saldoAwal" 
        :saldoTerpakai="saldoTerpakai" 
        :saldoAkhir="saldoAkhir" 
        :dataKategori="dataKategori" 
        :dataPengeluaran="dataPengeluaran" 

        @inputSaldo="saldoAwal = $event" 
        @inputPengeluaran="dataPengeluaran.push($event)"> 

       </kalkulator-data> 

       <kalkulator-chart 
        :chartData="chartData" 
        :chartOptions="chartOptions">  

       </kalkulator-chart> 

     </div> 
    </div> 
</template> 

<script> 
    import Chart from './Bagian/Chart.vue'; 
    import Data from './Bagian/Data.vue'; 

    export default { 
     data(){ 
      return { 
       saldoAwal : 0, 
       dataPengeluaran : [{ kategori : 'Abi', nominal : 12}, { kategori : 'Ilham', nominal : 13}], 
       dataKategori : [ 
        'Makan dan Minum', 
        'Berbelanja', 
        'Perlengkapan Rumah', 
        'Transportasi', 
        'Kendaraan', 
        'Gaya Hidup dan Hiburan', 
        'Komunikasi', 
        'Pengeluaran dan Finansial', 
        'Investasi', 
       ], 
       chartOptions : {responsive: true, maintainAspectRatio: false} 
      } 
     }, 
     computed : { 
      saldoTerpakai(){ 
       var saldoPakai = 0; 
       for(var data of this.dataPengeluaran){ 
        saldoPakai += parseInt(data.nominal); 
       } 
       return saldoPakai; 
      }, 
      saldoAkhir(){ 
       return this.saldoAwal - this.saldoTerpakai; 
      }, 
      getRandomColor(){ 
       var letters = 'ABCDEF'; 
       var color = '#'; 
       for (var i = 0; i < 6; i++) { 
        color += letters[Math.floor(Math.random() * 16)]; 
       } 
       return color; 
      }, 
      chartLabels(){ 
       var chartLabels = []; 
       for (var data of this.dataPengeluaran){ 
        chartLabels.push(data.kategori); 
        // backgroundColor.push(this.getRandomColor); 
       }; 
       return chartLabels; 
      }, 
      chartId(){ 
       var chartData = []; 
       for (var data of this.dataPengeluaran){ 
        chartData.push(parseInt(data.nominal)); 
        // backgroundColor.push(this.getRandomColor); 
       }; 
       return chartData; 
      }, 
      chartData(){ 
       return { 
        labels: this.chartLabels, 
        datasets: [ 
         { 
         label: 'Data One', 
         backgroundColor: '#f87979', 
         data: this.chartId 
         } 
        ] 
       } 
      } 
     }, 
     methods : { 

     }, 
     components : { 
      'kalkulator-data' : Data, 
      'kalkulator-chart' : Chart 
     }, 
    } 
</script> 

这是儿童

<template> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <h1 class="text-center">Struktur Pengeluaran</h1> 

      <chart-comp 
       :chartData="chartData" 
       :chartOptions="chartOptions">    
      </chart-comp> 

     </div> 
    </div> 
</template> 

<script> 
    import chartComp from './Chart-Data.js' 

    export default{ 
     props : ['chartData', 'chartOptions'], 
     components : { 
      'chart-comp' : chartComp 
     } 
    } 
</script> 

而且这个如GrandChild这是图

import {Bar} from 'vue-chartjs' 

export default Bar.extend({ 
    props : ['chartData', 'chartOptions'], 
    computed : { 
     renderChart(){ 
      this.renderChart(this.chartData, this.chartOptions); 
     } 
    }, 
    mounted() { 
     this.renderChart; 
    } 
}) 

我使用的计算，以保持反应，当我添加的数据，但它在控制台说：

app.js:5366 [Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded" 

found in 

---> <ChartComp> 
     <KalkulatorChart> at C:\xampp\htdocs\SemuaOkee-Laravel\resources\assets\js\components\Bagian\Chart.vue 
     <Kalkulator> at C:\xampp\htdocs\SemuaOkee-Laravel\resources\assets\js\components\Kalkulator.vue 
      <Root> 
warn @ app.js:5366 
handleError @ app.js:5451 
callHook @ app.js:7490 
insert @ app.js:8315 
invokeInsertHook @ app.js:10143 
patch @ app.js:10308 
Vue._update @ app.js:7248 
updateComponent @ app.js:7371 
get @ app.js:7710 
Watcher @ app.js:7693 
mountComponent @ app.js:7375 
Vue$3.$mount @ app.js:12503 
Vue$3.$mount @ app.js:14602 
Vue._init @ app.js:8942 
Vue$3 @ app.js:9027 
(anonymous) @ app.js:29926 
__webpack_require__ @ app.js:20 
(anonymous) @ app.js:29888 
__webpack_require__ @ app.js:20 
(anonymous) @ app.js:63 
(anonymous) @ app.js:66 
app.js:5455 RangeError: Maximum call stack size exceeded 
    at Watcher.evaluate (app.js:7809) 
    at VueComponent.computedGetter [as renderChart] (app.js:8064) 
    at VueComponent.renderChart (app.js:61047) 
    at Watcher.get (app.js:7710) 
    at Watcher.evaluate (app.js:7810) 
    at VueComponent.computedGetter [as renderChart] (app.js:8064) 
    at VueComponent.renderChart (app.js:61047) 
    at Watcher.get (app.js:7710) 
    at Watcher.evaluate (app.js:7810) 
    at VueComponent.computedGetter [as renderChart] (app.js:8064) 

当我还没有添加的数据，它的工作完美（这就是为什么我m硬编码中的两个对象父在开始时测试我的图表），但是当我添加数据时出现错误。

换句话说，它在静态而不是动态数据上工作。

Answer 1

在您的孙子组件中，您已经定义了一个计算属性renderChart，它返回this.renderChart。这是导致最大调用堆栈大小错误的原因。

你应该只调用renderChart方法在mounted钩：

import { Bar } from 'vue-chartjs' 

export default Bar.extend({ 
    props: ['chartData', 'chartOptions'], 
    mounted() { 
     this.renderChart(this.chartData, this.chartOptions); 
    } 
}) 

---

如果您需要的图表数据是反应性，VUE-chartjs提供指定使用一个混合的公认的愚蠢方式：

import { Bar, mixins } from 'vue-chartjs' 

export default Bar.extend({ 
    props: ['chartData', 'chartOptions'], 
    mixins: [mixins.reactiveProp], 
    mounted() { 
     this.renderChart(this.chartData, this.chartOptions); 
    } 
}) 

Here's the vue-chartjs documentation on using reactive data.