如何使用Vue.js将活动类添加到Tab的动态创建的导航中? [英] How to add active class to tab's dynamically created navigation using Vue.js?

问题描述

我正在尝试将活动类添加到元素中，以便使用vue.js进行标签导航.问题在于，除了是Vue的新功能之外，导航项还可以在for循环中动态创建，如下所示:

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>

JS看起来像这样:

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?

推荐答案

请勿使用isActive.检查tabSelected是否等于循环中的当前选项卡.

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}}"

这篇关于如何使用Vue.js将活动类添加到Tab的动态创建的导航中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！