CODEWITHSUNDEEP
javascriptvue.jstabscomponents
Thomas Vidal
Thomas Vidal

Reputation: 11

How open first tab with vuejs?

How do I open the first tab with VueJS? I have made two components but I don't know how to open the first tab automatically. This is what I've tried, but it doesn't work:

In mounted when i do console.log(this.tabs) return only 0 but before i do this.tabs = this.$children

Tabs.vue

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

<script>
    export default {
        name: "Tabs", 
        data: function(){
            return { tabs: null };
        },
        created: function() {
            this.tabs = this.$children;

            //this.tabs[0].isActive = true;
        },
        methods: {
            selectTab (selectedTab){
                this.tabs.forEach(tab => {
                   tab.isActive = (tab.href == selectedTab.href);
                });
            }
        }

    }
</script>

This is my second components $children Tab.vue

<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "Tabs", 
        props: {
            name: { require: true },
            selected: { default: false }
        }, 
        data() {
            return { isActive: false }
        },         
        computed: {
            href() {
                return '#' + this.name.toLowerCase().replace(/ /g,'-');
            }
        },
        mounted() {
            this.isActive = this.selected;
        },
        methods: {
            select(){
                this.isActive = true;
            }
        }
    }
</script>

This line doesn't work:

 //this.tabs[0].isActive = true;

Upvotes: 0

Views: 2960

Answers (1)

Istopopoki
Istopopoki

Reputation: 1762

I copy pasted the code from laracasts.com/series/learn-vue-2-step-by-step/episodes/11 and the first tab is opened by default.

It is the case because in the html, you have :selected=true set on the first tab.

If you want to open the second tab by default, move :selected=true to the second tab, like this : https://jsfiddle.net/ahp3zzte/1/

If you want to change the default tab dynamically, remove :selected=true from the html and call the selectTab method in the js. Also note that to do this, you need to use mounted instead of created. Check this other fiddle : https://jsfiddle.net/0402y2ew/

Upvotes: 1

Related Questions