title: How to add active class to tab's dynamically created navigation using Vue.js?
body: <p>I'm attempting to add an active class to an element for tabs navigation using vue.js. The problem is, besides being new to Vue, the navigation items are dynamically created in a for loop as follows:</p>
  
  <pre><code>&lt;c:forEach items="${tabnav.tabs}" var="tab" varStatus="loop"&gt;
    &lt;c:if test="${loop.count le tabnav.totalTabs}"&gt;
      &lt;li v-bind:class="{active : isActive}" v-on:click="tabSelected = ${loop.count}; isActive = !isActive"&gt;${tab.heading}&lt;/li&gt;
    &lt;/c:if&gt;
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p>the JS looks like this:</p>
  
  <pre><code>Vue.component('tabnav', {
      data: function() {
          return {
              tabSelected: 1,
              isActive: false
          };
      }
  });
  </code></pre>
  
  <p>The problem is that this is toggling the class on ALL the items in the navigation rather than the one that was clicked. </p>
  
  <p>Do I need to create a method for handling this?</p>