Skip to content

Instantly share code, notes, and snippets.

@shsmad

shsmad/v-tabs-fix.vue

Forked from abhaywawale/v-tabs-fix.vue
Created December 5, 2021 17:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shsmad/f22f114b0c9b76e8f93caac347c96f6e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shsmad/f22f114b0c9b76e8f93caac347c96f6e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @abhaywawale abhaywawale revised this gist Jul 4, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions v-tabs-fix.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -73,8 +73,8 @@ export default {
    * 1. Check if tab moved is the active one
    * 2. Check if tab moved is placed on active tab from right side
    * 3. Check if tab moved is placed on active tab from left side
    * 2. Check if tab moved to right side of active tab
    * 2. Check if tab moved to left side of active tab
    * 4. Check if tab moved to right side of active tab
    * 5. Check if tab moved to left side of active tab
    */
    if (tabNumber === oldIndex) {
    tabActive = newIndex;
  2. @abhaywawale abhaywawale created this gist Jul 4, 2018.
    95 changes: 95 additions & 0 deletions v-tabs-fix.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    <template>
    <v-container fluid>
    <v-layout align-start justify-center>
    <v-flex xs4 class="elevation-2 ma-2">
    <v-tabs v-model="model" color="cyan" dark slider-color="yellow">
    <draggable v-model="tabs" class="v-tabs__container" @update="tabUpdate">
    <v-tab v-for="(tab, index) in tabs" :key="index" :href="`#tab-${index}`">
    {{ tab.name }}
    </v-tab>
    </draggable>
    <v-tab-item v-for="(tab, index) in tabs" :key="index" :id="`tab-${index}`">
    <v-card flat>
    <v-card-text>{{ tab.text }}</v-card-text>
    </v-card>
    </v-tab-item>
    </v-tabs>
    </v-flex>
    <v-flex xs4 class="grey lighten-3 elevation-2 pa-3">
    <pre>{{ tabs }}</pre>
    </v-flex>
    </v-layout>
    </v-container>
    </template>

    <script>
    import draggable from "vuedraggable";
    export default {
    name: "tab-work-place",
    components: {
    draggable
    },
    data() {
    return {
    model: "tab-0",
    tabs: [
    {
    name: "1st Tab",
    text: "This is a 1st tab"
    },
    {
    name: "2nd Tab",
    text: "This is a 2nd tab"
    },
    {
    name: "3rd Tab",
    text: "This is a 3rd tab"
    },
    {
    name: "4th Tab",
    text: "This is a 4th tab"
    }
    ]
    };
    },
    methods: {
    // Converts tab-n to n as a number
    getTabNumber() {
    let tabString = this.model.slice(4, 5);
    return Number(tabString);
    },
    /***
    This function is called whenever there is an update
    of drag-n-drop in tabs
    */
    tabUpdate(evt) {
    let tabNumber = this.getTabNumber(); // The active tab number before udpate
    let oldIndex = evt.oldIndex; // Old index number of tab we are moving
    let newIndex = evt.newIndex; // New index number of tab we are moving
    let tabActive = null; // The new tab which can be set as active tab
    /**
    * This is description for each if condition with corresponding number
    * 1. Check if tab moved is the active one
    * 2. Check if tab moved is placed on active tab from right side
    * 3. Check if tab moved is placed on active tab from left side
    * 2. Check if tab moved to right side of active tab
    * 2. Check if tab moved to left side of active tab
    */
    if (tabNumber === oldIndex) {
    tabActive = newIndex;
    } else if (tabNumber === newIndex && tabNumber < oldIndex) {
    tabActive = tabNumber + 1;
    } else if (tabNumber === newIndex && tabNumber > oldIndex) {
    tabActive = tabNumber - 1;
    } else if (tabNumber < oldIndex) {
    tabActive = tabNumber + 1;
    } else if (tabNumber > oldIndex) {
    tabActive = tabNumber - 1;
    }
    this.model = "tab-" + tabActive;
    }
    }
    };
    </script>