title: VueJS @click with anchor tags
body: <p>I have a single page application with a side navigation bar which has a set of anchor tags in a list.</p>
  
  <p>I want to show which content to show in the page depending on the value of the <code>selectedPage</code> variable. As well as change the value of <code>selectedPage</code> based on the link that is clicked in the side bar.</p>
  
  <p>Even when including .prevent on the click event the code below does not change the value of the variable. Is there another condition I should be using instead</p>
  
  <p>MyPage.html</p>
  
  <pre><code>#Navbar for selecting content
  &lt;div id="sidebar-wrapper"&gt;
        &lt;ul class="sidebar-nav"&gt;
          &lt;li&gt;&lt;a href="#" @click.prevent="selectedPage ='Foo'"&gt;Foo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" @click.prevent="selectedPage ='Bar'"&gt;Bar&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  
  #Page content
  &lt;div id="page-content-wrapper"&gt;
   &lt;div class="main-content" id="app" v-cloak&gt;
  
    &lt;div class="container-fluid" v-if="selectedPage === 'Foo'"&gt;
     &lt;h3 class="page-title"&gt;{{selectedPage}}&lt;/h3&gt;
    &lt;/div&gt;
  
    &lt;div class="container-fluid" v-if="selectedPage === 'Bar'"&gt;
     &lt;h3 class="page-title"&gt;{{selectedPage}}&lt;/h3&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      selectedPage: 'Foo',
    }
  })
  </code></pre>