我是 VueJs 的新手,所以请记住这一点。
我有这样的单个模板组件
<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
的组件,但我一直在获取
[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 没有抛出任何Not found Errors 所以我真的很困惑这里发生了什么。感谢您提前提供帮助。
最佳答案
使用 es6 imports :
从“vue-nav-tabs”导入 VueTabs
将从模块导入默认导出为 VueTabs
(在本例中是一个 vue 插件,而不是您尝试使用的组件)。
同时:
从“vue-nav-tabs”导入 {VueTabs}
将从模块导入 VueTabs
导出。
关于javascript - Vuejs 挂载组件失败 : template or render function not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48649733/