CODEWITHSUNDEEP
javascriptvue.jstabsvuetify.js
Amirul Asyraf
Amirul Asyraf

Reputation: 101

How do I add Vuetify tab with separated router.js file?

I want to route the tab to some component which I have been assign but it is not successful because when I click to the tab, the component doesn't keep the tab view and directly view another page.

I have been try code that provides with some example but it is not successful.

Here myaccount.vue

<template>
  <div>
    <v-toolbar color="deep-purple darken-4" dark tabs>
      <h3>My Account</h3>
<v-spacer></v-spacer>
     <v-btn small color="error">PAYMENT RM 1120.00</v-btn>
      <template v-slot:extension>
        <v-tabs color="deep-purple darken-4" align-with-title>
          <v-tabs-slider color="white"></v-tabs-slider>
              <v-tab to="/foo">Profile</v-tab>
              <v-tab to="/bill">Bill</v-tab>

        </v-tabs>
      </template>
    </v-toolbar>
    <v-tabs-items>
      <v-tab-item>
     <router-view></router-view>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

Here the router.js file:

import Bill from './views/myccom/bill.vue'
Vue.use(Router)
 routes: [
    {
      path: '/bill',
      name: 'Bill',
      component: Bill
    },
  ],

How do I make the tab stick at the top and the content move without hiding the tab?

Upvotes: 0

Views: 181

Answers (1)

Luis de Brito
Luis de Brito

Reputation: 757

Don't use v-tab-item, just router-view.

Example:

<template>
  <v-container>

    <v-tabs
      v-model="activeTab"
      slider-color="yellow">
      <v-tab to="{ name: 'profile' }">
        Profile
      </v-tab>

      <v-tab to="{ name: 'bill' }">
        Bill
      </v-tab>
    </v-tabs>

    <router-view/>
  </v-container>
</template>

<script>
export default {
  name: 'MyComponentName',

  data: () => ({
    activeTab: '0'
  })
}
</script>

https://codepen.io/lc-brito/pen/GLoERR

Upvotes: 1

Related Questions