title: VueJs set active class, when one li element clicked in v-for loop
body: <p>I can't figure out how to properly select (set active class) when I do v-for loop and one class is already selected. Let me share the code and with further explanation</p>
  
  <p>These are my available subscriptions and one is already selected, based on user data</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li v-for="(s, key, index) in subscriptions"
          :class="checkIfClassActive(s.subscription_key)"
          @click="setActive(key, index)"&gt;
          {{ s.name }}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my js code</p>
  
  <pre><code>checkIfClassActive(userSubscriptionKey) {
      if (userSubscriptionKey === this.userSubscription.subscription_key) {
          return 'active';
      }
  },
  setActive(key, index) {
  
  },
  </code></pre>
  
  <p>And this is how is displayed
  <a href="https://i.stack.imgur.com/fLZWt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fLZWt.png" alt="enter image description here"></a></p>
  
  <p>Now the next step is when I click on one li element it should become active and all other li elements should lose active class, but the problem is that I can't figure out how to properly write setActive function. Can you please help me out, how to do this.</p>
  
  <p>If you need any additional informations, let me know and I will provide. Thank you!</p>