Javascript 如何每隔一段时间自动切换VueJS选项卡

这是我的第一个VueJS应用程序，它更像是一个POC，而不是一个严肃的项目。 尽管如此，我还是找到了解决问题的办法

该应用程序类似于几个“组”的仪表板，每个组都有一定数量的数据，我可以将其可视化。对于每种数据，我都有一个选项卡，在每个选项卡中，每个组都有这种可视化的数据

所以。现在我面临的问题是，作为一个仪表板，它应该能够显示所有信息，而无需用户交互。要意识到这一点，我需要标签按时间间隔进行更改。例如，每5分钟显示一个选项卡。我希望这是有道理的

我已经在谷歌上搜索了一些解决方案，但要让它们发挥作用，我需要重写我目前几乎所有的工作。因此，我正在寻找一个解决方案，我可以实施到我目前的项目

以下是我目前的代码：

仪表板.vue

<template>
    <div style="margin-left:220px" class="text-center m-3">
        <tabs>
            <tab title="Robots">
                <div v-if="responseAvailable == true">
                    <div v-for="customer in result" class="customerCard">
                        <span class="card-content">
                            {{ customer.CustomerName }}
                            <hr />
                            <div v-for="robot in customer.ListOfRobots" :class="robot.State">
                                {{ robot.Name }}
                            </div>
                        </span>
                    </div>
                </div>
            </tab>
            <tab title="Jobs" :selected="true">
                <div v-if="responseAvailable == true">
                    <div v-for="customer in result" class="customerCard">
                        <span class="card-content">
                            {{ customer.CustomerName }}
                            <hr />
                            <apexchart width="500" type="bar"
                                       :options="customer.options" :series="customer.ListForFrontend">
                            </apexchart>
                        </span>
                    </div>
                </div>
            </tab>
            <tab title="Queues">
                <div v-if="responseAvailable == true">
                    <div v-for="customer in result" class="customerCard">
                        <span class="card-content">
                            {{ customer.CustomerName }}
                            <hr />
                            <div v-for="queue in customer.ListOfQueues" id="chart">
                                {{ queue.Name }}
                                <apexchart type="line" height="200" :options="lineChartOptions" :series="queue.FrontedListQueues"></apexchart>
                            </div>
                        </span>
                    </div>
                </div>
            </tab>
            <tab title="Triggers">
                <div v-if="responseAvailable == true">
                    <div v-for="customer in result" class="customerCardPie">
                        <span class="card-content">
                            {{ customer.CustomerName }}
                            <hr />
                            <apexchart type="pie" width="280" :options="piechartOptions" :series="customer.TriggersFE"></apexchart>
                        </span>
                    </div>
                </div>
            </tab>
        </tabs>
    </div>
</template>

<script>
    import M from 'materialize-css'
    import ApexCharts from 'apexcharts'
    import Tab from './Tabs/Tab.vue'
    import Tabs from './Tabs/Tabs.vue'

    export default {
        name: 'Dashboard',
        components: {
            Tab,
            Tabs
        },
        /*data() {
            return {
                result: null,
                responseAvailable: null,
                timer: ""
            }
        },*/

        data: () => ({
            result: null,
            responseAvailable: null,
            timer: "",
            pieSeries: [34,345,123,6,75],
            piechartOptions: {
                chart: {
                    width: 280,
                    type: 'pie',
                },
                labels: ['Enabled', 'Disabled'],
                colors: ['#11FF00', '#FF0000',],
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            },
            lineChartOptions: {
                chart: {
                    height: 200,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                colors: ['#11FF00', '#FFA200', '#FF0000', ],
                stroke: {
                    curve: 'smooth'
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                        opacity: 0.5
                    },
                },
                xaxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
                    categories: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00',],
                }
            },
        }),
        created() {
            this.fetchAPIData();
            this.timer = setInterval(this.fetchAPIData, 900000)
        },
        mounted() {
            M.AutoInit(); // That way, it is only initialized when the component is mounted
        },
        methods: {
            fetchAPIData() {
                this.responseAvailable = false;
                fetch("https://localhost:44378/api/values", {
                    "method": "GET",
                })
                    .then(response => {
                        if (response.ok) {
                            return response.json()
                        } else {
                            alert("Server returned " + response.status + " : " + response.statusText);
                        }
                    })
                    .then(response => {
                        this.result = response;
                        console.log(this.result[0].ListOfQueues[1].FrontedListQueues[0].data);
                        this.responseAvailable = true;
                    })
                    .catch(err => {
                        alert(err);
                    });
            },
            cancelAutoUpdate() {
                clearInterval(this.timer)
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    };
</script>

<template lang="html">
    <div class='tab' v-show='isActive'>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: 'Tab'
            },
            name: { requred: true },
            selected: { default: false }
        },
        data() {
            return {
                isActive: true
            }
        },
        mounted() {
            this.isActive = this.selected;
        },
        computed: {
            href() {
                return "#" + this.name.toLowerCase().replace(/ /g, '-');
            }
        }
    }
</script>

<template lang="html">
    <div>
        <ul class='tabs__header'>
            <li v-for='tab in tabs'
                :key='tab.title'
                @click='selectTab(index)'
                :class='{"tab__selected": (index == selectedIndex)}'>
                <a :href="tab.href" @click="selectNewTab(tab)">{{ tab.name }}</a>
            </li>
        </ul>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedIndex: 0, // the index of the selected tab,
                tabs: []         // all of the tabs
            }
        },
        created() {
            this.tabs = this.$children
        },
        mounted() {
            //this.selectTab(0);
            let tabsVue = this;
            setInterval(function () {
                tabsVue.changeToNextTab();
            }, 1000);
        },
        methods: {
            changeToNextTab() {
                if (!this.tabs.length) {
                    return;
                }

                let activeIndex = this.tabs.findIndex(tab => tab.isActive);

                if (activeIndex === -1) {
                    activeIndex = 0;
                }

                // add one to the index for the next tab
                activeIndex++;

                if (activeIndex >= this.tabs.length) {
                    // Reset to first tab if on the last tab
                    activeIndex = 0;
                }

                this.selectNewTab(this.tabs[activeIndex]);

            },
            selectNewTab(slectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = (tab.name == slectedTab.name)
                })
            }
        }
    }
</script>

{{customer.CustomerName}

{{robot.Name}
{{customer.CustomerName}



导出默认值{
数据（）{
返回{
selectedIndex:0，//所选选项卡的索引，
制表符：[//所有制表符
}
},
创建（）{
this.tabs=this.$children
},
安装的（）{
//此选项。选择选项卡（0）；
让tabsVue=这个；
setInterval（函数（）{
tabsVue.changeToNextTab（）；
}, 1000);
},
方法：{
changeToNextTab（）{
如果（！this.tabs.length）{
返回；
}
让activeIndex=this.tabs.findIndex（tab=>tab.isActive）；
如果（activeIndex==-1）{
activeIndex=0；
}
//在下一个选项卡的索引中添加一个
activeIndex++；
如果（activeIndex>=this.tabs.length）{
//如果在最后一个选项卡上，则重置为第一个选项卡
activeIndex=0；
}
this.selectNewTab（this.tabs[activeIndex]）；
},
选择新选项卡（slectedTab）{
this.tabs.forEach（tab=>{
tab.isActive=（tab.name==slectedTab.name）
})
}
}
}

非常感谢您的帮助。我是怎么说的，这是我的第一个VueJS项目，所以我知道有些东西不是最佳实践

Codesandbox:

请使用内置代码片段或类似Codesandbox的东西创建一个，这应该是它，但我不知何故无法让它正常工作。但该应用程序中没有其他组件