title: How to set active menu option with Vue
body: <p>I have a two column layout.  The left column has a stacked menu, and when the user selects an option the content displays in the right.  What's the best way to set the <code>active</code> class on the selected menu link?</p>
  
  <p>I have come up with a solution below, but it seems kind of verbose.  Each menu item has a class assignment which is conditional upon <code>data.activeTab</code>.  A click event handler updates the value of <code>data.activeTab</code>.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;ul class="nav nav-pills nav-stacked"&gt;
                      &lt;li role="presentation" :class="{active : activeTab == 'option1'}"&gt;
                          &lt;a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu"&gt;Option 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li role="presentation" :class="{active : activeTab == 'option2'}"&gt;
                          &lt;a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu"&gt;Option 2&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt; 
              &lt;/div&gt;
              &lt;div class="col-md-9"&gt;
                  &lt;router-view&gt;&lt;/router-view&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data : function () {
              return {
                  activeTab : 'option1'
              }
          },
          props : [
              'uuid'
          ],
          methods : {
              updateMenu : function (event) {
                  var str = event.target.toString();
                  this.activeTab = str.substr(str.lastIndexOf('/') + 1);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>