Close navigation drawer after click on item?

Question

I'm working on a University project and trying to implement a feature that allows the navigation drawer to close whenever I click on one of the items in it. However, I'm not sure how to handle this.

    <template>
  <div id="navigation-mobile">
    <Searchbar class="search"/>
    <ul v-for="item in tabs"
            :key="item.path"
            active-class
            @click="$router.push(item.path)"
    >
      <li>{{item.name}}</li>
    </ul>
    <div class="mobile-footer">
      <ul>
        <li>About us</li>
        <li>Contact us</li>
      </ul>
    </div>
  </div>
</template>

And here's what I have in App.vue, which contains a part of the nav-drawer:

<template>
  <v-app id="app">
    <NavBarMobile v-if="mobileView"/>
    <div class="content" :class="{'open': showNav}">
      <div style="height:20px"></div>
      <div id="navigation-icon" v-if="mobileView"
      @click="showNav = !showNav">
        <v-icon medium dark>menu</v-icon>
      </div>
      <NavBar v-if="!mobileView"></NavBar>
      <v-content class="pa-0" transition="slide-x-transition"></v-content>
      <Footer v-if="!mobileView"></Footer>
      <router-view></router-view>
    </div>
  </v-app>
</template>

This is my code so far. I would like to use a @click, I think that would be the most efficient way to do that, but I don't know if I can, since I'm already using it. I'm not very good at programming. Any suggestions?

Here's the codepen: https://codesandbox.io/s/gameshelf-0209-jack-forked-zobe5

You can find the component in NavBarMobile.vue

Thanks in advance for taking the time to read this post!

Answer 1

There are a few ways you can achieve this. The simplest, in my opinion, would be to simply "watch" the $route object from within your App.vue:

export default {
  // ...
  watch: {
    $route(to, from) {
      this.showNav = false
    }
  }
}

The watch property on the Vue instance contains functions that will watch for changes to variables of the same name. Upon change, the function is run.

More on watchers and computed properties: https://v2.vuejs.org/v2/guide/computed.html

EDIT: Some extra info about reacting to Router changes: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Answer 2

Another way to achieve it is by emitting an event from the child component.

• first point the click event to a method to handle your logic like so :

<ul v-for="item in tabs" :key="item.path" active-class @click="redirect(item.path)">

• then add a method in your script to emit a custom event from your NavBarMobile component :

methods: {
        redirect(path) {
            this.$router.push(path)
            this.$emit('change', false)
        }
    },

• and finally listen for this event from the parent component:

<NavBarMobile v-if="mobileView" @change="showNav = $event"/>