Cuando trato de llamar a la función de reflujo para mi gráfico de gráficos altos cuando el tamaño de vue-grid-layout cambia, ocurrió este error. Quiero que mi gráfico tenga el mismo tamaño de div, aunque el usuario cambie el tamaño.

no tengo idea de lo que hago

 template> <Main> <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="draggable" :is-resizable="resizable" :vertical-compact="true" :use-css-transforms="true" @layout-created="layoutCreatedEvent" @layout-before-mount="layoutBeforeMountEvent" @layout-mounted="layoutMountedEvent" @layout-ready="layoutReadyEvent" @layout-updated="layoutUpdatedEvent" > <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" @resize="resizeEvent" @move="moveEvent" @resized="resizedEvent" @container-resized="containerResizedEvent" @moved="movedEvent" class="card" > <Charts type="chartOptions" ref="charts"></Charts> </grid-item> </grid-layout> </Main> </template> <script> import Main from "../Main"; import Charts from "../../components/Charts"; import VueGridLayout from 'vue-grid-layout'; export default { name: 'home', components: { Main, Charts, GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem }, methods: { resizeEvent: function(i, newH, newW, newHPx, newWPx){ this.$refs.charts[i].chart.reflow(); }, }, data () { return { columns: {xss: 1, xs: 1, sm: 2, md: 2, lg: 4}, layout: [ {"x":0,"y":0,"w":4,"h":10,"i":"0"}, {"x":4,"y":0,"w":4,"h":10,"i":"1"} ] } } } </script>

Cuando trato de llamar a la función de reflujo para mi gráfico de gráficos altos cuando el tamaño de vue-grid-layout cambia, ocurrió este error. Quiero que mi gráfico tenga el mismo tamaño de div, aunque el usuario cambie el tamaño.