When dealing with tabs, only one content component is necessary at a time. I have implemented a straightforward solution which I hope will be helpful.
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import ChartComponent from './ChartComponent.vue';
interface Tab {id: number, symbol: string}
const tabs: Tab[] = reactive([]);
let nextTabId = 0
const activeTabId = ref(0)
const addTab = (symbol: string) => {
const id = nextTabId++;
tabs.push({
id,
symbol,
});
};
onMounted(() => {
addTab("USD");
addTab("EUR");
});
</script>
<template>
<div class="tabs" v-if="tabs.length">
<button v-for="tab in tabs" :key="tab.id"
@click="activeTabId = tab.id"
>
{{tab.id}} - {{ tab.symbol }}
</button>
</div>
<div class="tab-content">
<component :is="ChartComponent" :symbol="tabs[activeTabId].symbol"/>
</div>
</template>
Note:
If you require different components for different tab items, they can be placed into the tabs array with a new component property without issue. Dynamic props can be passed using the v-bind attribute in the component.
Demo