![](/img/trans.png)
[英]VueJS error: "Failed to mount component: template or render function not defined"
[英]Vuejs - Failed to mount component: template or render function not defined
我不確定自己在做什么錯。 我收到以下錯誤:
控制台中的錯誤消息:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueChartjs>
<Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
<App> at src\App.vue
<Root>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
// component: HelloWorld
component: require('../components/HelloWorld.vue').default
}
]
})
應用程序
<template>
<div id="app" class="container">
<img src="./assets/logo.png" class="logo">
<!-- chartjs -->
<div class="chartjsvue">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsvue from '@/assets/javascripts/chartjs'
export default {
components: {
'vue-chartjs': Chartjsvue
}
};
</script>
Chartsjs.html
<div class="wrapper">
<vue-chartjs></vue-chartjs>
</div>
chartjs.js
file is rmpty- no code in the file
錯誤指的是什么,需要采取什么措施來解決?
我認為問題是您的chartjs.js
為空。 您需要做:
import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
template: template
}
您的chartjs.js文件不應為空。 它應該是帶有可渲染模板的Vue組件。 任何JavaScript都可以在script標簽本身中編寫。
組件對象應僅包含您需要在當前組件中使用的Vue組件的列表。 並且每個組件都必須有一個模板。
感謝所有為回答做出貢獻的人。 js文件不應為空。 這是顯示chartjs所有圖表的完整代碼
main.js [src / main.js]
import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'
Vue.config.productionTip = false
require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App,
ChartJsPluginDataLabels
},
template: '<App/>'
})
App.vue [src / App.vue]
<template>
<div id="app" class="container">
<!-- chartjs -->
<div class="chartjsvue tab-content active" id="tab2">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue [src / components / Chatjsvue.vue]
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsbarvue from '@/assets/javascripts/chartjsbar'
export default {
components: {
'vue-chartbarjs': Chartjsbarvue
},
mounted(){
console.log('Data is chartjs',this)
},
methods: {},
}
</script>
Chartsjs.html [src / views / chartjshtml / chartsjs.html]
<div class="wrapper">
<div class="chart_header">chartjs bar chart</div>
<vue-chartbarjs></vue-chartbarjs>
</div>
chartjsbar.js [src / assets / javascripts / chartjsbar.js]
/*===================================================
File: Chartsjsvue.vue
===================================================*/
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
data () {
return {
datacollection: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
label: '1st Dataset hello',
backgroundColor: 'rgba(52,65,84, 0.3)',
bordercolor: '#344154"',
hoverBackgroundColor: "#344154",
data: [40, 20, 12, 39]
},
{
label: '2nd Dataset',
backgroundColor: 'rgba(130,191,163, 0.5)',
bordercolor: '#82BFA3"',
hoverBackgroundColor: "#82BFA3",
data: [50, 70, 22, 55]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
display: false
}
}
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.