title: toggle active class on list menu items - vue js
body: <p>I want that, clicking on a menu item, the active class is triggered only for that specific item and removed for the others, until now I wrote this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;nav class="navbar"&gt;
      &lt;div class="navbar__brand"&gt;
        &lt;router-link to="/"&gt;Stock Trader&lt;/router-link&gt;
      &lt;/div&gt;
      &lt;div class="navbar__menu"&gt;
        &lt;ul class="navbar__menu--list"&gt;
          &lt;li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}"&gt;
            &lt;router-link to="/portfolio"&gt;Portfolio&lt;/router-link&gt;
          &lt;/li&gt;
          &lt;li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}"&gt;
            &lt;router-link to="/stocks"&gt;Stocks&lt;/router-link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="navbar__menu--second"&gt;
        &lt;ul class="navbar__menu--list"&gt;
          &lt;li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}"&gt;
            &lt;a href="#"&gt;End Day&lt;/a&gt;
          &lt;/li&gt;
          &lt;li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}"&gt;
            &lt;a href="#"&gt;Save / Load&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
      export default {
        data(){
          return{
            isActive: false
  
          }
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>now of course, when I click on one item the active class is inserted/removed for all the items, what is the best solution for making that only a specific item, on clicking on it, receives the active class?</p>