如何使用Vue.js将活动类添加到Tab的动态创建的导航中？

Question

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

<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
        };
    }
});

问题在于，这会在导航中的所有项目（而不是单击的项目）上切换类。

我是否需要创建一种处理方法？

Answer 1

不要使用isActive 。 检查tabSelected是否等于循环中的当前选项卡。

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