v-card内的bootstrap-vue v-tabs呈现'undefined'

Question

使用bootstrap-vue我有一个使用b-tabs和其他一些组件的工作示例。

但是，在一个页面（.vue）上，当我尝试将块包装在标记内时，页面总是将该卡及其内容呈现为“未定义” 我使用here中的示例。

没有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（lang =“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-card内的b-tabs

<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>

Answer 1

升级到最新版本的BootstrapVue可以解决此错误。

Answer 2

我在 bootstrap-vue 2.21.2 中遇到了类似的问题。最终是我有一个没有用@Component 标记的组件。在我的所有组件中添加它之后，从“未定义”文本变为显示正确的内容。见https://github.com/bootstrap-vue/bootstrap-vue/issues/5985#issuecomment-765558938。