Tabbed navigation in Vue.Js

Question

I'm trying to create a basic tabbed navigation system with Vue. I'm capturing user's navigation choice and calling a function which changes a certain data. That data is eventually going to determine which tab should be active. So far I have this:

HTML

<div id="app">
    <div id="nav">
        <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
        <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
    </div>
    <div class="content">
        <div class="boxes" id="home" v-bind:class="choice">
        </div>
        <div class="boxes" id="info" v-bind:class="choice">
        </div>
    </div>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        choice: 'homeActive' // Home is chosen by default
    },
    methods: {
        makeActive: function(val) {
            this.choice = val;
        }
    }
});

At the moment, if the user clicks on Home link, both home and info divs get homeActive class, this is because I couldn't manage to return two statements with my methods with this basic logic:

enable tab1 & disable tab2 || enable tab 2 & disable tab1

I'm trying different approaches but I can affect only a single state with called methods due to binding my content to a single class.

Any suggestions on how I can get this working with Vue?

jessegavin · Accepted Answer · 2016-12-12 19:34:29Z

11

The way I generally solve this is by adding another function isActiveTab like so...

new Vue({
    el: '#app',
    data: {
        choice: 'homeActive' // Home is chosen by default
    },
    methods: {
        makeActive: function(val) {
            this.choice = val;
        },
        isActiveTab: function(val) {
          return this.choice === val;
        }
    }
});

Then in your view...

<div id="app">
    <div id="nav">
        <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
        <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
    </div>
    <div class="content">
        <div class="boxes" id="home" v-show="isActiveTab('homeActive')">
        </div>
        <div class="boxes" id="info" v-show="isActiveTab('infoActive')">
        </div>
    </div>
</div>

answered Dec 12, 2016 at 19:34

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cinnaroll45 Over a year ago

Solves my problem and no need to deal with CSS. I didn't know about conditional rendering, thanks! Further reading for people who might visit this in the future: vuejs.org/v2/guide/conditional.html

Collectives™ on Stack Overflow

Tabbed navigation in Vue.Js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related