v-card 中的 bootstrap-vue v-tabs 呈现“未定义”

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

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

Answer 2

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

Answer 3

我有一个父组件缺少导致未定义行为的 @Component 装饰器（在我的情况下是 App.vue）。确保所有组件都应用了这个装饰器。