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

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