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

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

1 个答案: