Estoy probando otra forma de hacer gráficos para algunos informes, para eso estoy usando ChartJs, vue, axios y la información en mi base de datos. He revisado el código y he seguido los puntos que señala el error pero no he podido solucionarlo, aquí está el código:
<template> <div> <br> <br> <chart></chart> <br> <br> </div> </template> <script> import VueChartJs from 'vue-chartjs' import Chart from 'chart.js' import Vue from 'vue' Vue.component('chart',{ extends:VueChartJs.Pie, data(){ return{ etiquetas: [], stock: [], bgColors: ['#5DB3E2', '#5DE2C1 ', '#C0E25D '], } }, mounted(){ this.mostrar() this.renderChart({ labels: this.etiquetas, datasets: [ { label:'Graficos', backgroundColor: this.bgColors, data: this.stock } ] }, {responsive:true, maintainAspectRadio:false}) }, methods:{ mostrar(){ axios.get('http://localhost:4000/users') .then(response => { response.data.forEach(element => { this.etiquetas.push(element.position) this.stock.push(element.id) }); }) } } }) </script>Este es todo el error:
Uncaught TypeError: Cannot set properties of undefined (setting 'render') at normalizeComponent (componentNormalizer.js?2877:24) at eval (Reports.vue?ab61:8) at Module../src/views/Reports.vue (app.js:1836) at __webpack_require__ (app.js:849) at fn (app.js:151) at eval (index.js?a18c:1) at Module../src/router/index.js (app.js:1716) at __webpack_require__ (app.js:849) at fn (app.js:151) at eval (main.js:13)Estoy muy agradecido por su ayuda en la solución de este problema.
Parece que no está exportando correctamente la definición del componente Vue. Intente agregar export default {
Debe registrar el componente utilizando export default , como de costumbre, ¿por qué usar componentes de un solo archivo? Esto se vería así:
<script> export default { name: 'chart' } </script>