title: Vue.js: How to change a class when a user has clicked on a link?
body: <p>I am trying to add a class to an element depending on whether the user has clicked on a link. There is a similar question <a href="https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click">here</a> but it is not working as I wanted it to be.</p>
  
  <p>I created a component which has its own internal data object which has the property, <code>isShownNavigation: false</code>. So when a user clicks on the <code>a</code> I change <code>isShownNavigation: true</code> and expect my css class <code>isClicked</code> to be added. Alas that is not happening - <code>isShownNavigation</code> stays <code>false</code> in the component when I displayed it <code>{{isShownNavigation}}</code> but I can see in the console that my method is working when clicked.</p>
  
  <p>I imported my <code>header</code> component to the <code>App</code>. Code is below.</p>
  
  <p><strong>Header Component</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;header class="header"&gt;
    &lt;a 
      href="#"
      v-bind:class="{isClicked: isShowNavigation}"
      v-on:click="showNavigation"&gt;
      Click
    &lt;/a&gt;
  &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'header-component',
    methods: {
      showNavigation: () =&gt; {
        this.isShowNavigation = !this.isShowNavigation
      }
    },
    data: () =&gt; {
      return {
        isShowNavigation: false
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Application</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;header-component&gt;&lt;/header-component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HeaderComponent from './components/Header.vue'
  export default {
    name: 'app',
    components: {
      'header-component': HeaderComponent
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am using the pwa template from <a href="https://github.com/vuejs-templates/pwa" rel="nofollow noreferrer">https://github.com/vuejs-templates/pwa</a>.</p>
  
  <p>Thanks.</p>