CODEWITHSUNDEEP
vue.jsvuetify.js
Harry Doddema
Harry Doddema

Reputation: 43

Dynamically loading/changing Vuetify Tabs

I'm trying to use Vuetify Tabs to display my items. I'm using Tabs to display a swipable list of items that the user can approve or not. After approving the item is removed from the list.

I'm running into issues dynamically updating the list of tabs, though.

I've made a Codepen that I think displays the basic issue:

https://codepen.io/hdoddema/pen/yrrBGQ

Template:

<div id="app">
  <v-app id="inspire">
    <div>
      <v-toolbar color="cyan" dark tabs>
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <template v-slot:extension>
          <v-tabs
            v-model="tab"
            color="cyan"
            align-with-title
          >
            <v-tabs-slider color="yellow"></v-tabs-slider>

            <v-tab v-for="item in items" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>

      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item">
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
    <v-btn @click="reset">Less</v-btn>
    <v-btn @click="more">More</v-btn>
    <pre>{{ tab }}</pre>
  </v-app>
</div>

Script:

new Vue({
  el: '#app',
  data () {
    return {
      tab: null,
      items: [
        'web', 'shopping', 'videos', 'images', 'news'
      ],
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  },
  methods: {
    reset() {
      this.items = ['one new tab'];
    },
    more() {
      this.items =[
        'web', 'shopping', 'videos', 'images', 'news'
      ];
    }
  }
})

After changing the list of tabs items, the currently active tab is weird. I basically just want to reload data and reset the current tab to the first one.

I've tried setting the currently active tab tab to 0 or null in the reset() and more() functions. I've also tried doing the same in a nextTick, but that doesn't really work either.

It feels like Vuetify Tabs take a while to reload the data, and some kind of event is missing when its finished (or I'm just not aware of how to wait for that). Or maybe I'm just mis-using Tabs and there's something easier to use as a reloadable, swipeable list of things.

Upvotes: 4

Views: 10765

Answers (1)

arora
arora

Reputation: 869

Try this - 

<v-tab v-for="(item, i) in items" :key="i">

and in your reset function - 

reset() {
  this.tab = null; // add this new line
  this.items = ['one new tab'];
},

The instead of using item as key use i (index).

Link to pen - https://codepen.io/anon/pen/rbbNEW?editors=1010

Upvotes: 3

Related Questions