开发者问题收集

未捕获的类型错误:无法设置未定义的属性(设置‘render’)

2021-09-14
4513

我正在尝试另一种方法为一些报告制作图表,为此我使用了 ChartJs、vue、axios 和数据库中的信息。我已经检查了代码并按照错误指出的要点进行操作,但我无法解决它,这里是代码:

<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>

这是整个错误:

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)

非常感谢您帮助我解决这个问题。

2个回答

看起来您没有正确导出 Vue 组件定义。 尝试添加 export default {{

Nikola Pavicevic
2021-09-14

您应该使用 export default 注册组件,就像通常使用单文件组件一样。它看起来像这样:

<script>
export default {
  name: 'chart'
}
</script>
StevenSiebert
2021-09-14