[英]Vuejs Failed to mount component: template or render function not defined
我對VueJ不太熟悉,因此請記住這一點。
我有這樣的單個模板組件
<template>
<div class="testing-container">
<button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
<div v-if="show" class="testing-frame">
<vue-tabs active-tab-color="#e74c3c"
active-text-color="white"
type="pills"
:start-index="1"
direction="vertical"
>
<v-tab title="First tab" icon="ti-user">
First Tab
</v-tab>
<v-tab title="Second tab" icon="ti-settings">
Second tab content
</v-tab>
<v-tab title="Third tab" icon="ti-check">
Third tab content
</v-tab>
</vue-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
created() {
},
methods: {
toggleContainer() {
if(this.show){
this.show = false;
}else{
this.show = true;
}
},
}
}
</script>
我正在嘗試加載名為vue-tabs
另一個componenet,但我不斷
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <VueTabs>
這是我的構造函數的東西:
/**
* Import Vue Tabs
*/
import VueTabs from "vue-nav-tabs"
/**
* Vue Nav Tabs
*/
Vue.component('vue-tabs', VueTabs)
/**
* Units Testing Component
*/
Vue.component('unit-testing',
require('./components/testing/UnitTesting.vue')
);
const app = new Vue({
el: '#app',
});
Gulp Watch不會拋出任何“ 未發現”錯誤,因此我對這里發生的事情感到非常困惑。 感謝您的幫助。
使用es6導入 :
import VueTabs from "vue-nav-tabs"
將從模塊中默認導出為VueTabs
(在這種情況下,這是一個vue插件,而不是您要使用的組件)。
而:
import { VueTabs } from "vue-nav-tabs"
將從模塊導入VueTabs
導出。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.