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

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函数.你能帮我解决一下,怎么做

如果您需要任何其他信息,请告诉我,我会提供.谢谢!

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当list元素的索引与之相同时,添加css类activeIndex.

至于activeIndex在用户更改之前设置为现有选项,您可以设置activeIndex何时将订阅数据提取到用户的当前订阅.

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