VueJs 设置活动类，当在 v-for 循环中单击一个 li 元素时

Question

当我执行 v-for 循环并且已经选择了一个类时，我无法弄清楚如何正确选择（设置活动类）。让我分享代码并进一步解释

这些是我的可用订阅，并且已根据用户数据选择了一个

<ul>
    <li v-for="(s, key, index) in subscriptions"
        :class="checkIfClassActive(s.subscription_key)"
        @click="setActive(key, index)">
        {{ s.name }}
    </li>
</ul>

和我的js代码

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(key, index) {

},

这就是显示方式

现在下一步是当我单击一个 li 元素时它应该变为活动状态并且所有其他 li 元素应该失去活动类，但问题是我无法弄清楚如何正确编写 setActive 函数。你能帮帮我吗，如何做到这一点。

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

原文由 Valor_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加一个名为 --- data 的属性 activeIndex ：

   data() {
    return {
      activeIndex: undefined
    }
  },

和你的 setActive 方法：

   methods: {
    setActive(subscription, index) {
      this.activeIndex = index;
      this.userSubscription.subscription_key = subscription.subscription_key
},
    getSubscriptions() {
       .....
       // fetch subscriptions in this.subscriptions var
       .....
       // select preselected subscription, when fetching subscriptions
       let userSubscriptionKey = this.userSubscription.subscription_key;
       let indexOfObject = this.subscriptions.findIndex(
            o => o.subscription_key === userSubscriptionKey
       );
       this.setActive(this.userSubscription, indexOfObject);

    }
  }

对您的模板稍作修改：

 <ul>
    <li v-for="(s, index) in subscriptions"
        :class="{ 'active': activeIndex === index }" :key="s.id"
        @click="setActive(s, index)">
        {{ s.name }}
    </li>
</ul>

您基本上设置了一个应该处于活动状态的索引，仅此而已。 active 当列表元素的索引与 activeIndex 相同时添加 css 类。

至于在用户更改之前将 activeIndex 设置为现有选择，您可以在获取用户当前订阅的订阅数据时设置 activeIndex 。

小提琴：http: //jsfiddle.net/eywraw8t/256701/

原文由 dziraf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

每次选择选项卡时更改您的 this.userSubscription.subscription_key 变量。为此通过 setActive(s.subscription_key) 你可以这样做，

 <li v-for="(s, key, index) in subscriptions"
        :class="checkIfClassActive(s.subscription_key)"
        @click="setActive(s.subscription_key)">
        {{ s.name }}
</li>

杰斯

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(subscription_key) {
    this.userSubscription.subscription_key=subscription_key;
},

原文由 Helping hand 发布，翻译遵循 CC BY-SA 4.0 许可协议