vue.js - [Vue 警告]:挂载钩子中的错误:“TypeError:this.$refs.canvas 未定义”
问题描述
我在我的一个项目中使用 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
谁能告诉我为什么会发生这个错误?
解决方案
如果您使用的是单个文件模板,那么您必须删除标签,因为您正在扩展一个 vue 元素
推荐阅读
- php - 无法在 json 响应中输出会话变量
- javascript - 从派生自 SQL 查询的 URL 打开页面
- python - 如何使用python和opencv在图像上绘制两个轮廓,它们之间的轮廓距离为100像素
- python - 如果我的文本文件在 Python 中有整数和字符串,我该如何排序
- android - RecyleView 显示所有重复项
- javascript - ES6 导入场景
- html - Vue Native Router 出现未使用错误
- sql-server - 我可以对临时当前表和历史记录中的字段应用唯一约束吗?
- php - 在 Codeigniter 中无法获得 ajax 响应
- amazon-web-services - CloudFront ForwardedValues 模棱两可的文档