У меня есть ряд вкладок в Vuejs, как показано ниже. Я хочу добавить кнопки под содержимым каждой вкладки, которые переходят к «следующей» и «предыдущей» вкладкам и помечены заголовком следующей (или предыдущей) вкладки. Проблема в том, что я не всегда показываю все вкладки в зависимости от определенных вещей.
Итак, какой метод я могу использовать, чтобы показать соответствующую кнопку с правильным маршрутом? Я начал с жестко закодированных кнопок в каждом файле vue, указывающих на маршрут следующей вкладки, но это больше не работает для меня, поскольку вкладки не всегда одинаковы.
<template>
<div>
<v-tabs color = "" slider-color = "blue" grow = "" style='box-shadow:0 0px 0 1px #ddd;'>
<v-tab to = "/customer/info" ripple = ""> General Information</v-tab>
<v-tab to = "/customer/quotes" ripple = "" v-if = "showQuotes">Quotes</v-tab>
<v-tab to = "/customer/events" ripple = "">Events</v-tab>
<v-tab to = "/customer/note" ripple = "">
<v-badge color = "indigo">
<span slot = "badge">{{notesCounter}}</span>
Notes
</v-badge>
</v-tab>
<v-tab to = "/customer/more" ripple = "">More</v-tab>
</v-tabs>
<router-view></router-view>
</div>
</template>
Вы можете хранить свои вкладки в массиве и использовать его для вычисления массива для рендеринга.
Шаблон:
<template>
<div>
<v-tabs color = "" slider-color = "blue" grow = "" style='box-shadow:0 0px 0 1px #ddd;'>
<v-tab v-for = "(tab, index) in tabsToShow"
:to = "tab.to" ripple = "">{{tab.name}}</v-tab>
</v-tabs>
<router-view></router-view>
<a v-if = "selectedTabIndex > 0"
:href = "tabsToShow[selectedTabIndex - 1].to">
{{tabsToShow[selectedTabIndex - 1].name}}</a>
<a v-if = "selectedTabIndex < tabsToShow.length - 1"
:href = "tabsToShow[selectedTabIndex + 1].to">
{{tabsToShow[selectedTabIndex + 1].name}}</a>
</div>
</template>
Сценарий:
data() {
return {
tabs: [
{
to: '/customer/info',
name: 'General Information',
visible: true,
},
// other tabs
],
selectedTabIndex: 0,
}
},
computed: {
tabsToShow() {
return this.tabs.filter(tab => tab.visible);
},
},
Затем все, что вам нужно сделать, это каким-то образом получить индекс выбранной в данный момент вкладки в отфильтрованном массиве. Например, по щелчку.
Спасибо @ Sui-Dream! Я собираюсь поэкспериментировать с этой идеей!