[Vuejs]-How to link a button to the "next" page in vuejs2, when next page varies

0👍

You can store your tabs in an array and use it to compute an array for rendering.

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>

Script:

data() {
  return {
    tabs: [
      {
        to: '/customer/info',
        name: 'General Information',
        visible: true,
      },
      // other tabs
    ],
    selectedTabIndex: 0,
  }
},
computed: {
  tabsToShow() {
    return this.tabs.filter(tab => tab.visible);
  },
},

Then, all you have to do is somehow get an index of currently selected tab in an filtered array. For example, on click.

Leave a comment