Vue Tabs open the correct tab on page load

on the mounted cycle method you can check if there's a #whatever-tab in the url, and show that specific tab.

Thank you for your quick response and Sorry for the newbie questions. I took a few weeks off learning vue and its as if i have to learn it all over again...

So essentially i need to grab the href() and if its the same as the tab then set it as active.

I took a look and cant see how to get the url and compare it to the tab selected. Would i need to add another prop to the tab for the url?

heres the codse i have at the moment:

<template>
    <div>
        <div class="tabs is-boxed">
           <ul>
                <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
                    <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                </li>
            </ul>
        </div>
        <div class="tabs-details">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return { tabs: [] };
        },

        created() {
            this.tabs = this.$children;
        },

        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = (tab.href == selectedTab.href);
                });
            }
        }
    }

Vue.component('tab', {
    template: `
        <div v-show="isActive"><slot></slot></div>
    `,

    props: {
        name: { required: true },
        selected: { default: false }
    },

    data() {
        return {
            isActive: false
        };
    },

    computed: {
        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-');
        }
    },

    mounted() {
    // Test to see if tab would select
        if(this.href == this.name){
            this.isActive = this.selected
        }
// end test
        this.isActive = this.selected;
    },
});

</script>

Ok ive managed to sort it out by using the code below, but the issue im having is that its not selecting the first item if no tab is selected!

How would i go about selecting the first tab if no #tab has been selected. As it stands in the laravel template i have :selected="true" for the first item

methods: {
    selectTab(selectedTab){
        this.tabs.forEach(tab => {
            tab.isActive = (tab.href == selectedTab.href);
        });
   
    }
}

mounted(){
    let windowLocationHash = window.location.hash;

    if (this.href == windowLocationHash) {
        this.selected = true;
    }

    this.isActive = this.selected;
}

Any help would be greatful. Many thanks

Still cant figure this one out.

How do i make the first tab selected or not if the url does not have #tab in the url .

I have :selected="true" on the template to select the first tab

@skoobi , There no need to use "selected" property at all! This is what I have done:

In "tabs" component:

mounted : function () {

            if (window.location.hash === '' ) {
                this.tabs[0].isActive = true;
            }
        }

In "tab" component:

        mounted: function () {

            if (this.href === window.location.hash) {
                this.isActive = true;
            }

        }

With bootstrap-vue you can do:

<div id="app">
    <b-tabs content-class="mt-3" v-model="myIndex" @input="change()">
        <b-tab title="Tab 1">
        </b-tab>
        <b-tab title="Tab 2">
        </b-tab>
        <b-tab title="Tab 3">
        </b-tab>
    </b-tabs>
</div>

<script>

    let lecture = new Vue({
        el: '#app',

        data() {
            return {
                myIndex: 0, // Current tab
            }
        },

        mounted() {
            // Get the previous tab from the url
            this.myIndex = parseInt(window.location.hash.replace('#',''), 10);
        },

        methods: {
            change () {
                // Save the current tab in url
                window.location.hash = this.myIndex;
            }

        }
    });

</script>

That works for me!

Finally i figured it out. Its very simple

So in Tab.vue in mounted hook added this.

 if(window.location.hash) {
    let tempUrl = decodeURI(window.location.hash).split('#')[1];
    if(tempUrl.replace(/-/g, ' ') === this.name.toLowerCase()){
     this.isActive = true; 
    } 
  } else {
  this.isActive  = this.selected;
  } 

That's all! I hope this will be helpful.