Prevent click event in Vue conditonally

I am disabling document body scroll when my mobile nav is open which is working as expected. However it was not removing the overflow hidden when user would click a link to another route/page. I created a simple method to remove the overflow hidden when a link is clicked in the nav when the menu is open, which does work with one small caveat. When the user is on say page “home” and the mobile nav is OPEN, when they click the link “home” inside of the mobile nav it is closing the menu, and I understand I have done that with the method I created. Is there a way to prevent that event from firing when clicking the link of the page you are on?

 <header :class="{ 'header-active': activeHamburger }">

    <nav class="nav-row nav-row--primary" aria-label="Main Navigation">
    <ul class="row--flex justify--space-between">
        <li>
            <router-link to="/" @click="removeOverflowHidden();
          ">
                home
            </router-link>
        </li>
        <li>
            <router-link to="About" @click="removeOverflowHidden();
          ">
                about
            </router-link>
        </li>
        <li>
            <router-link to="Work" @click="removeOverflowHidden();
          ">
                work
            </router-link>
        </li>
        <li>
            <router-link to="Contact" @click="removeOverflowHidden();
          ">
                contact
            </router-link>
        </li>
    </ul>
</nav>
</header>


data() {
    return {
      activeHamburger: false
    };
  },
  watch: {
    activeHamburger: function() {
      if (this.activeHamburger) {
        document.documentElement.style.overflow = "hidden";
        return;
      }
      document.documentElement.style.overflow = "auto";
    }
  },
methods:{
 removeOverflowHidden() {
      this.activeHamburger = false;
    }
}

Answer

You can pass the route value to the method and check that it’s not same as the current route before executing.

 <template>
 <header :class="{ 'header-active': activeHamburger }">

    <nav class="nav-row nav-row--primary" aria-label="Main Navigation">
    <ul class="row--flex justify--space-between">
        <li>
            <router-link to="/" @click="removeOverflowHidden('home');
          ">
                home
            </router-link>
        </li>
        <li>
            <router-link to="About" @click="removeOverflowHidden('about');
          ">
                about
            </router-link>
        </li>
        <li>
            <router-link to="Work" @click="removeOverflowHidden('work');
          ">
                work
            </router-link>
        </li>
        <li>
            <router-link to="Contact" @click="removeOverflowHidden('contact');
          ">
                contact
            </router-link>
        </li>
    </ul>
</nav>
</header>
</template>
<script>
export default {
 data() {
    return {
      activeHamburger: false
    };
  },
  watch: {
    activeHamburger: function() {
      if (this.activeHamburger) {
        document.documentElement.style.overflow = "hidden";
        return;
      }
      document.documentElement.style.overflow = "auto";
    }
  },
  methods:{
    removeOverflowHidden(value) {
      if (this.$route.path !== value) {
      this.activeHamburger = false;
      }
    }
  } 
}
</script>

I haven’t seen your routes but you can also use this.$route.name if you prefer and adjust accordingly the values you pass to the method.

Advertisement

Answer