title: Tabbed navigation in Vue.Js
body: <p>I'm trying to create a basic tabbed navigation system with Vue. I'm capturing user's navigation choice and calling a function which changes a certain data. That data is eventually going to determine which tab should be active. So far I have this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div id="nav"&gt;
          &lt;a href='#' class="tab" v-on:click="makeActive('homeActive')"&gt;Home&lt;/a&gt;
          &lt;a href='#' class="tab" v-on:click="makeActive('infoActive')"&gt;Info&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div class="boxes" id="home" v-bind:class="choice"&gt;
          &lt;/div&gt;
          &lt;div class="boxes" id="info" v-bind:class="choice"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Vue</strong></p>
  
  <pre><code>new Vue({
      el: '#app',
      data: {
          choice: 'homeActive' // Home is chosen by default
      },
      methods: {
          makeActive: function(val) {
              this.choice = val;
          }
      }
  });
  </code></pre>
  
  <p>At the moment, if the user clicks on Home link, both home and info divs get homeActive class, this is because I couldn't manage to return two statements with my methods with this basic logic: </p>
  
  <p><strong>enable tab1 &amp; disable tab2 || enable tab 2 &amp; disable tab1</strong></p>
  
  <p>I'm trying different approaches but I can affect only a single state with called methods due to binding my content to a single class.</p>
  
  <p>Any suggestions on how I can get this working with Vue?</p>