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

【问题标题】：How to add active class to tab's dynamically created navigation using Vue.js?如何使用 Vue.js 将活动类添加到选项卡的动态创建导航？
【发布时间】：2017-09-20 20:44:27
【问题描述】：

我正在尝试使用 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
        };
    }
});

问题在于，这是在导航中的所有项目上切换类，而不是在被点击的项目上切换。

我需要创建一个方法来处理这个问题吗？

【问题讨论】：

标签： javascript jquery vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

工作就像一个魅力。 Vue 文档中有关于此的内容吗？或者这只是建立 Vue 技能后的一般知识？
@lscmaro 好吧，特别是对于这个，它并不是真正的 Vue 东西。如果您根据全局值设置active，则所有选项卡在设置时都将处于活动状态。因此，通过将当前选定的选项卡存储在数据中，您已经成功了；您只需要完成循环并仅激活与所选选项卡相同的选项卡，在您的情况下，该选项卡由 loop.count 标识。
这是有道理的。很好的解释。