javascript - Hide parent with v-onclick Vue 2.0. max-width: 767px -

trying build dropdown-menu shown when screen smaller 767px. there 2 requirements here hide menu , are:

if clicks outside menu , when random router link being clicked.

export default {      name: 'navbar',      data() {        return {          isshow: false        }      },      methods: {        onclick(e) {          isshow = false        }      }  }

<button v-on:click ="isshow = !isshow">click me</button>          <div class="router" v-show="isshow">          <router-link to="/" class="nav-link" v-on:click.prevent="onclick()">home</router-link>          <router-link to="/phones" class="nav-link">phones</router-link>          <router-link to="/moreproducts" class="nav-link">more products</router-link>          <router-link to="/blogs" class="nav-link">support</router-link>          <router-link to="/news" class="nav-link">news</router-link>        </div>            </div>

to show menu according screensize

you can use jquery browser viewport width.

 $(window).width();  

then write function check screen width , return true/false.

showmenu() {   let screenwidth = $(window).width()   if (screenwidth < 767) {     return true   } else {     return false   } } 

to hide menu

1. use vue clickaway check if clicks outside menu.

2. write before each navigation guard hide menu.

   router.beforeeach((to, from, next) => {   this.hidemenu() // hides menu   next() })