I am trying another way to make graphs for some reports, for that I am using ChartJs, vue, axios and the information in my database. I have reviewed the code and followed the points that the error points out but I have not been able to solve it, here is the code:
<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>
This is the whole 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)
I am very grateful for your help in solving this problem.
It looks like you are not exporting Vue component definition properly.
Try to add export default {
You should register the component using export default, as usual why using single file components. This would look like this:
<script>
export default {
name: 'chart'
}
</script>