Отрисовка компонента при нажатии на кнопку
Всем привет, необходимо при нажатии на ссылку отрендерить ранее созданный компонент, не совсем понимаю как это можно сделать
export default{
name: 'Flight',
data() {
return {
tabs: [],
tabCounter: 0,
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i] === x) {
this.tabs.splice(i, 1)
}
}
}
},
newTab() {
this.tabs.push(this.tabCounter++)
}
}
<div id="navbarMain">
<ul class="navbarul">
<li class="navbarList">
<img src="@/assets/map.png" class="image">
<p class="navbarDescription"><a href="https://vuejsexamples.com/tag/tab/">Дислокации▾</a></p>
</li>
<li class="navbarList" >
<img src="@/assets/flight.png" class="image">
<p class="navbarDescription">Рейсы▾</p>
</li>
<li class="navbarList">
<img src="@/assets/wagon.png" class="image">
<p class="navbarDescription">Вагоны</p>
</li>
<li class="navbarList">
<img src="@/assets/report.png" class="image">
<p class="navbarDescription">Отчеты▾</p>
</li>
</ul>
</div>
// компонент
<template>
<div class="contentWagonPark">
<b-card class="leftPark" >
<b-tabs card>
<b-tab title="Карточка вагонов">
<b-table striped hover :items="items"></b-table>
</b-tab>
<b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Карточка вагонов № ' + i">
Карточка вагонов № {{ i }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
Закрыть
</b-button>
</b-tab>
<template #tabs-end>
<b-nav-item @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
</template>
</b-tabs>
</b-card>
</div>
</template>