Vuejs Не удалось смонтировать компонент: шаблон или функция визуализации не определены

1

Я новичок в 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 не бросает ничего Не найдено Ошибки, поэтому я действительно смущен тем, что здесь происходит. Я ценю за помощь заранее.

  • 0
    Каковы ваши настройки сборки? Вы проходите через что-то вроде vue-loader или gulp-vueify ? Файл VUE - это удобный формат. Это должно быть преобразовано прежде, чем это может быть импортировано.
  • 0
    Я не уверен, что это то же самое, но я использую gulp для его сборки, и из того, что я понимаю, он использует эликсир laravel для веб-упаковки app.js
Показать ещё 3 комментария
Теги:
vuejs2
vue-component

1 ответ

4
Лучший ответ

Использование импорта es6:

import VueTabs from "vue-nav-tabs"

будет импортировать экспорт по умолчанию из модуля в виде VueTabs (который в этом случае является vue-плагином, а не компонентом, который вы пытаетесь использовать).

В то время как:

import { VueTabs } from "vue-nav-tabs"

будет импортировать экспорт VueTabs из модуля.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню