Bulma's navbar-buger doesnt connect to menu items in Vue.js 2

So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.

The above code works , but this is a more vue-ish way to do the navbar-burger menu.

<template>      <nav class="navbar">        <div class="container">        <div class="navbar-brand is-large">          <a class="navbar-item" href="#">              <img  alt="K R O N O S" height="100px">          </a>          <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">              <span></span>              <span></span>              <span></span>        </button>        </div>        <div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">          <div class="navbar-end">            <div class="navbar-item">              <a class="" href="#"> Docs </a>            </div>            <div class="navbar-item ">              <a class="" href="#"> Report </a>            </div>            <div class="navbar-item">              <a class="">More</a>            </div>            <div class="navbar-item">              <a class="">Logout</a>            </div>        </div>      </div>      </div>    </nav></template><script>export default {  name: 'Navbar',  data () {    return {      msg: '',      activator: false    }  },  methods: {    makeBurger () {      this.activator = !this.activator      return this.activator    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>div{  border: 0px solid black;}</style>

Hope this helps someone. The show/hide functionality is taken care by Bulma.

This works, but

1. will not close the menu
2. will cause router-links not to work

For 1.) I recommend adding @click to navbar-item as well:

<a @click="makeBurger" class="navbar-item">    <router-link to="/login">        {{link1}}    </router-link></a>