title: How do I toggle a class to show which tab is active in VueJS?
body: <p>I have created two tabs, which I would like the class of active set on the first <code>&lt;li&gt;</code> by default. </p>
  
  <p>Then, when the second tab is selected, the .active class should pass to the second <code>&lt;li&gt;</code> and be removed from the first. </p>
  
  <p>I can use CSS to create some style rules in order to give a visual indicator as to which tab is currently active. </p>
  
  <p>I have also created a <a href="https://jsfiddle.net/60nz35v9/1/" rel="noreferrer">JS Fiddle</a> to see the current output. </p>
  
  <p>Any help welcome as I am rather stuck.</p>
  
  <pre><code>&lt;ul class="overlay-panel-actions-primary"&gt;
      &lt;li v-for="(tab, index) in tabs" @click="currentTab = index"&gt;{{tab}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="content-bd"&gt;
      &lt;div class="tab-content"&gt;
          &lt;div v-show="currentTab === 0"&gt;
              List of filters options
          &lt;/div&gt;
          &lt;div v-show="currentTab === 1"&gt;
              List of sort options
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  new Vue({
    el: "#app",
      data() {
          return {
              currentTab: 0,
              tabs: ['Filter', 'Sort']
          };
      },
  })
  </code></pre>