未捕獲的類型錯誤：無法設置未定義的屬性（設置“渲染”）

Question

我正在嘗試另一種方法為一些報告制作圖表，因為我正在使用 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)

我非常感謝您幫助解決這個問題。

Answer 1

看起來您沒有正確導出 Vue 組件定義。 嘗試添加export default {

Answer 2

您應該使用export default注冊組件，就像往常一樣使用單文件組件。 這看起來像這樣：

<script>
export default {
  name: 'chart'
}
</script>