如何使用自定义选项卡VueJs呈现动态内容“组件”

Question

我有一个来自Laracasts教程的服装制作的Tabs和Tab，它工作得很好，但是当选项卡被更改时，我需要加载数据，但是当数据被加载时，

我需要呈现另一个有手风琴的组件，在每个手风琴选项卡中，它们的一些图表组件也需要呈现。

那么，当Tabs选项卡被更改时，我如何使用图表组件来呈现手风琴呢？

Tabs组件：

 <template>

    <div class="tab-container -mt-px w-full">
        <div class="tabs">
            <ul class="list-reset flex border-b">

                <li class="" v-for="(tab, index) in tabs" role="tab">
                    <a class="bg-white inline-block font-semibold hover:no-underline"
                       :class="[
                        {
                           'active-tab-link text-blue-dark  border-l border-r active-tab-link-p': tab.isActive,
                           'text-blue hover:text-blue-darker non-active-tab-link-p': !tab.isActive
                       },
                       ]"
                       :href="tab.href" @click="selectedTab(tab)">
                        {{tab.name}}
                    </a>
                </li>
            </ul>
        </div>

        <div class="tabs-details px-4 w-full">
            <slot></slot>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Tabs",

        data() {
            return {
                tabs: []
            };
        },

        created() {
            this.tabs = this.$children;
            // this.selectFirstTab();
        },

        methods: {

            selectedTab(selectedTab) {

                this.$emit('onTabChange', selectedTab);

                this.tabs.map((tab, index) => {
                    tab.isActive = (tab.name === selectedTab.name)
                });

            },
        }
    }
</script>

选项卡组件：

<template>

    <div class="w-full" role="tabpanel" v-show="isActive">
        <slot></slot>
    </div>

</template>

<script>
    import {isEmpty} from "../helpers/Helper";

    export default {
        name: "Tab",
        props: {
            name: {
                type: String,
                required: true
            },
            selected: {
                type: Boolean,
                default: false,
            },
            isFirst: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                // isActive: false,
                isActive: true,
                // isFirst: this.isFirst
            };
        },

        computed: {
            href() {
                return this.formatHref(this.name);
            },
        },

        mounted() {

            this.selectTabFromURL();

        },
        methods: {

            selectTabFromURL() {
                let hash = this.$route.hash;

                if (this.selected) {
                    this.isActive = this.selected;
                } else if (!isEmpty(hash)) {
                    this.isActive = (this.formatHref(this.name) === hash);
                } else if (this.isFirst) {
                    this.isActive = this.isFirst;
                } else if (!this.isFirst && this.isActive) {
                    this.isActive = !this.isActive;
                }
            },

            formatHref(id) {
                return `#${id.toLowerCase().replace(/ /g, '-')}`;
            }


        }
    }
</script>

主要组件：

<template>
 <!--components tabs start-->
            <div class="flex flex-col">
                <div class="mt-3 border-t-4 border-primary-color border-6 bg-white">
                    <div class=" border border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400  rounded-b lg:rounded-b-none lg:rounded-r leading-normal">

                        <Tabs @onTabChange="handleTabChange">

                            <!--:name="`${tab.name} - ${tab.component.type}`"-->
                            <Tab v-for="(tab, index) in page.tabs"
                                 :key="tab.id"
                                 :id="tab.slug"
                                 :name="tab.name"
                                 :slug="tab.slug"
                                 :isFirst="index === 0"
                            >

                             <div>
                                 How to render the dynamic accordion with the charts one time only no need to re-render 
                             </div>


                            </Tab>

                        </Tabs>

                    </div>
                </div>
            </div>
            <!--components tabs end-->
</template>

在普通的HTML和JQuery中，我可以加载数据和呈现结果，并将其附加到想要的选项卡中--我们如何使用vue来实现这一点?在这种情况下，动态组件帮助吗？

Answer 1

我搜索了一个解决方案，并找到并实现了“以编程方式创建Vue.js组件实例”