How to add active class to tab's dynamically created navigation using Vue.js?

Question

I'm attempting to add an active class to an element for tabs navigation using vue.js. The problem is, besides being new to Vue, the navigation items are dynamically created in a for loop as follows:

<c:forEach items="${tabnav.tabs}" var="tab" varStatus="loop">
  <c:if test="${loop.count le tabnav.totalTabs}">
    <li v-bind:class="{active : isActive}" v-on:click="tabSelected = ${loop.count}; isActive = !isActive">${tab.heading}</li>
  </c:if>
</c:forEach>

the JS looks like this:

Vue.component('tabnav', {
    data: function() {
        return {
            tabSelected: 1,
            isActive: false
        };
    }
});

The problem is that this is toggling the class on ALL the items in the navigation rather than the one that was clicked.

Do I need to create a method for handling this?

Bert · Accepted Answer · 2017-09-20 20:51:58Z

2

Don't use isActive. Check to see if the tabSelected is equal to the current tab in the loop.

v-bind:class="{active : tabSelected === ${loop.count}}"

answered Sep 20, 2017 at 20:51

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

3 Comments

lscmaro Over a year ago

Worked like a charm. Is there anything about this in Vue documentation? Or is this just general knowledge after building Vue skills?

Bert Over a year ago

@lscmaro Well, for this in particular, its not really a Vue thing. If you set active based off a global value, then all the tabs will be active when it is set. So you were part way there by storing the currently selected tab in data; you just needed to complete the loop and activate only the tab that is equal to the selected tab, which in your case is identified by loop.count.

lscmaro Over a year ago

That makes sense. Great explanation.

Collectives™ on Stack Overflow

How to add active class to tab's dynamically created navigation using Vue.js?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related