v-card 내부의 bootstrap-vue v-module이 'bootstrap'을 렌더링함

v-card 내부의 bootstrap-vue v-module이 'bootstrap'을 렌더링함

bootstrap-vue를 사용하여 b-tabs 및 기타 컴포넌트를 사용한 작업 예를 보여 줍니다.

단, 한 페이지(.vue)에서는 블록을 태그로 감싸려고 하면 항상 페이지가 카드와 그 내용을 '정의되지 않음'으로 렌더링합니다.여기서 샘플을 사용합니다.

v-card가 없는 경우:

그걸 보면 알 수 있어요

코드는 문자 그대로 위의 페이지와 main.ts에서 참조된 샘플에 따릅니다.

import {Card} from 'bootstrap-vue/es/components'
import { Button } from 'bootstrap-vue/es/components';
import { Collapse } from 'bootstrap-vue/es/components';
import { Alert } from 'bootstrap-vue/es/components';
import { Tabs } from 'bootstrap-vue/es/components';

    Vue.use(Tabs);
Vue.use(Alert);
Vue.use(Collapse);
Vue.use(Button);
Vue.use(Card);

new Vue({
router,
store,
components: {
    bCard: Card,
    bButton: Button,
    bCollapse: Collapse,
    bAlert: Alert,
    bTabs: Tabs,
    pagination
},
render: h => h(App)
}).$mount("#app");

근본적인 문제를 어떻게 분리할 것인지조차 누가 제게 올바른 방향을 알려줄 수 있나요?

아래에 추가 코드 추가

Vue(bue="ts") 구성 요소가 올바르게 표시되지 않음:

<template>
    <div class="container-fluid">
        <div class="row ml-1">
            <h4>Complaint Reference: {{ complaint.ComplaintReference }}</h4>
            <div class="col-12"><p>Enter the details of the complaint and click Save</p></div>
            <div class="col-12">
                <b-alert variant="success"
                         dismissible
                         :show="showDismissableAlert"
                         @dismissed="showDismissableAlert=false">
                    Your changes have been saved
                </b-alert>
            </div>
        </div>
        <div class="row">
            <!-- the next line is a separate vue component that uses the same approach and which renders correctly -->
            <tabs-view></tabs-view>
            <div class="col-md-12">
                <b-card no-body> <!--   THIS IS WHAT BREAKS! -->
                    <b-tabs card>
                        <b-tab title="Details" active>
                            <p> in first tab</p>

                        </b-tab>
                        <b-tab title="Contact">
                            <p> in second tab</p>
                        </b-tab>
                        <b-tab title="Description">
                            <p> in third tab</p>
                        </b-tab>
                        <b-tab title="Outcome">
                            <p> in final tab</p>

                        </b-tab>
                    </b-tabs>
                </b-card>  <!--   THIS IS WHAT BREAKS! -->
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>
<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";
    import {Complaint} from "@/components/complaints/Complaint";
    import TabsView from '../shared/Tabs.vue'
    @Component({
        components: {
            tabsView: TabsView
        }
    })
    export default class EditComplaintComponent extends Vue {
        complaint: Complaint = new Complaint("");
        baseUri: string = "api/Complaints/GetByReference/?id=";
        showDismissableAlert: Boolean = false;
    }
</script>
<style scoped>
</style>

그 후 파손된 컴포넌트에 소비되는 비TS vue 컴포넌트가 B카드 내의 b탭에서 정상적으로 동작합니다.

<template>
    <div>
        <b-card title="Card Title"
                img-src="https://lorempixel.com/600/300/food/5/"
                img-alt="Image"
                img-top
                tag="article"
                style="max-width: 20rem;"
                class="mb-2">
            <!--<p class="card-text">-->
                <!--Some quick example text to build on the card title and make up the bulk of the card's content.-->
            <!--</p>-->
            <b-button href="#" variant="primary">Go somewhere</b-button>
            <b-card no-body>
                <b-tabs card>
                    <b-tab title="first" active>
                        <br>I'm the first fading tab
                    </b-tab>
                    <b-tab title="second" >
                        <br>I'm the second tab content
                    </b-tab>
                    <b-tab title="disabled" disabled>
                        <br>Disabled tab!
                    </b-tab>
                </b-tabs >
            </b-card>
        </b-card>
    </div>
</template>
<script>
export default {
    components: { }
}
</script>
<style scoped>
</style>

bootstrap-vue 2.21.2에서도 비슷한 문제가 발생했습니다.결국 컴포넌트가 @Component로 표시되지 않은 컴포넌트가 있었습니다.모든 컴포넌트에 추가한 후 '정의되지 않은' 텍스트에서 적절한 내용을 표시하기 위해 변경되었습니다.https://github.com/bootstrap-vue/bootstrap-vue/issues/5985#issuecomment-765558938 를 참조해 주세요.

이 오류를 방지하려면 최신 버전의 BootstrapVue로 업그레이드하십시오.

부모 컴포넌트에는, 이 컴포넌트를 찾을 수 없었습니다.@Component데코레이터(내 경우)App.vue정의되지 않은 동작의 원인이 되고 있습니다.모든 컴포넌트에 이 데코레이터가 적용되어 있는지 확인합니다.

언급URL : https://stackoverflow.com/questions/50120964/bootstrap-vue-v-tabs-inside-v-card-renders-undefined