title: Hide Navigation Links in VueJs When Clicked
body: <p>I tried everything to make the navigation links hide when I clicked but it didn't worked. Here my Header.vue file.</p>
  
  <pre><code>&lt;template&gt;
  &lt;nav class="navbar is-dark is-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-brand"&gt;
              &lt;router-link to="/" class="navbar-item"&gt;
                   &lt;img src="../../assets/logo.png" width=""&gt;
              &lt;/router-link&gt;
              &lt;a role="button"
                  :class="{ 'is-active': ShowMenu }"
                  class="navbar-burger burger"
                  @click="toggleMenu()"
                  aria-label="menu"
                  aria-expanded="false"&gt;
                  &lt;span aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div :class="{ 'is-active': ShowMenu }"
              class="navbar-menu"&gt;
              &lt;div class="navbar-start"&gt;
                  &lt;router-link to="/" class="navbar-item"&gt;Home&lt;/router-link&gt;
                  &lt;router-link to="/about" class="navbar-item"&gt;About&lt;/router-link&gt;
              &lt;/div&gt;
              &lt;div class="navbar-end"&gt;
                  &lt;div class="navbar-item"&gt;
                      &lt;div class="field is-grouped"&gt;
                          &lt;p class="control"&gt;
                              &lt;router-link to="/login" class="button is-dark"&gt;
                                  &lt;span&gt;&lt;i class="fa fa-lock"&gt;&lt;/i&gt; Login&lt;/span&gt;
                              &lt;/router-link&gt;
                          &lt;/p&gt;
                          &lt;p class="control"&gt;
                              &lt;router-link to="/register" class="button is-light"&gt;
                                  &lt;span&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Register&lt;/span&gt;
                              &lt;/router-link&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's the JS codes. Navigation are working when a click the links but the only problem I have is that it didn't automatically hide.</p>
  
  <pre><code>export default {
    name: "Header",
    data() {
        return {
            ShowMenu: false,
            NavigationItems: true,
            NavigationItems: false
        }
    },
    methods: {
        toggleMenu: function() {
            this.ShowMenu = !this.ShowMenu
        },
        toggleNavItem: function() {
            false
        }
    }
  }
  </code></pre>