I am trying to make a component using graph.js and get data from axios my Component is CashFlow.vue:
<template>
<q-card class="bg-white full-width">
<q-card-section class="bg-primary">
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6 text-white text-center">{{title}}</div>
</div>
</div>
</q-card-section>
<q-card-section>
<canvas id="cash-flow-graph"></canvas>
</q-card-section>
</q-card>
</template>
<script>
import Chart from 'chart.js'
export default {
props: {
title: {
type: String,
default: ''
},
data: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
data () {
return {
}
},
mounted () {
this.createChart('cash-flow-graph')
},
methods: {
createChart (chartId) {
const ctx = document.getElementById(chartId)
const myChart = new Chart(ctx, {
type: 'line',
data: { ...this.data },
options: { ...this.options }
})
return { ...myChart }
}
}
}
</script>
<style>
</style>
So I draw this component in the Main Component:
import CashFlow from 'src/components/charts/CashFlow'
<cash-flow :data="cashFlow" :options="optionsLine" title="This is the title" v-if ="loadCash" :key="cashKey"></cash-flow>
and y try call the data and fill in the mounted of the main component:
async loadCashFlow () {
await this.fetchCashFlowData(formatYMD(javaScriptDateToString(this.initDate)))
this.cashFlow = { ...this.dashboardCrud.getStore('getCashFlow') }
this.cashKey++
this.loadCash = true
}
I am getting the data and the graph is working but I have this error:
> RangeError: Maximum call stack size exceeded
> at Function.keys (<anonymous>)
> at _traverse (vue.runtime.esm.js?5593:2130)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2128)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2132)
> at _traverse (vue.runtime.esm.js?5593:2132)