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

Posted 2023-02-23

【中文标题】v-card 中的 bootstrap-vue v-tabs 呈现“未定义”

【英文标题】：bootstrap-vue v-tabs inside v-card renders 'undefined'

【发布时间】：2018-10-11 18:08:44

【问题描述】：

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

【问题讨论】：

我今天也遇到同样的问题，你解决了吗？

我实际上并没有解决这个问题，我删除了标签和卡片的实现，因为我时间紧迫。

我无法再次找到这个，但在我移除 b 卡之后的某个地方，我发现了一篇与通过 b 卡进行数据绑定以降低控制有关的帖子。它与这个问题没有特别的关系，但我似乎记得我认为在我看到的情况下使用@Props（我使用 TS 组件风格的编程）实际上可能已经解决了这个问题

升级到最新的 BootstrapVue 来解决这个问题。

我发现这个问题很有趣，我发现这个问题与 no-body 在 <b-card> 中的使用特别相关，但在使用 BootstrapVue 2.20.1 时仍然困扰着我......

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

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