Wie Erzeuge dynamische Inhalte "Komponente" mit benutzerdefinierten Registerkarten VueJs

ich habe ein Kostüm aus Registerkarten und Registerkarte aus Laracasts Tabs Tutorial , und es funktioniert gut, aber ich brauche, um Daten zu laden, wenn das Register geändert wird, und das habe ich gemacht, aber wenn die Daten geladen sind,

ich brauche zum Rendern einer anderen Komponente, die Ziehharmonika und in jedem Akkordeon Registerkarte Ihre einige Diagramme Komponenten machen auch

also, wie kann ich machen das Akkordeon mit den charts von Komponenten, wenn der Registerkarten Registerkarte wird geändert

Registerkarten-Komponente:

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

Register-Komponente:

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

die main-Komponente:

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

im normalen HTML und JQuery, ich kann die Daten laden und Rendern Sie das Ergebnis und fügen es an die gewünschte Registerkarte, wie kann dies mit vue, Dosis die dynamische Komponente in diesem Fall helfen ?

+2
2019-09-19 08:57:23
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an