vue.js - [Vue 警告]：挂载钩子中的错误：“TypeError：this.$refs.canvas 未定义”

Question

我在我的一个项目中使用 Vue Chart 但收到此错误。

这是图表组件

<line-example></line-example>

这是我的脚本

<script>
import Navbar from '@/components/navbar/Navbar'
import {Line} from 'vue-chartjs'


export default {
    extends: Line,
    components:{
      Navbar,
      'line-example': Line
    },
    data(){
      return{
          dialog:null
      }
    },
    mounted () {
        this.renderChart({
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#FC2525',
              data: [40, 39, 10, 40, 39, 80, 40]
            },{
              label: 'Data Two',
              backgroundColor: '#05CBE1',
              data: [60, 55, 32, 10, 2, 12, 53]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false})

    }
  }
</script>

你可以在这里找到完整的代码 https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/dashboard/Dashboard.vue

谁能告诉我为什么会发生这个错误？

Answer 1

如果您使用的是单个文件模板，那么您必须删除标签，因为您正在扩展一个 vue 元素