如何使用自定义选项卡 VueJs 呈现动态内容 "component"

Question

我有一套服装制作的 Tabs 和 Tab 来自 Laracasts Tabs Tutorial ，它工作正常，但我需要在更改选项卡时加载数据，我这样做了，但是当数据加载时，

我需要渲染另一个具有手风琴的组件，并且在每个手风琴选项卡内，他们的一些图表组件也需要渲染

那么当“选项卡”选项卡更改时，我如何使用图表组件渲染手风琴

选项卡组件：

 <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

我搜索了解决方案并找到并实施了 "Creating Vue.js Component Instances Programmatically"

如何使用自定义选项卡 VueJs 呈现动态内容 "component"

How to render dynamic content "component" with custom tabs VueJs

javascript

frontend

web-frontend

vue.js

vuejs2