Disable Vue click event based on a condition

One issue I encountered was that even though I successfully disabled the document body scroll when my mobile nav was open, the overflow hidden feature was not being removed when a user clicked a link to another route or page. To address this, I implemented a simple method to remove the overflow hidden when a link is clicked in the nav while the menu is open. This method works well, but there is a small caveat I need help with. Currently, if a user is on a page like "home" with the mobile nav open and they click the "home" link in the nav, it closes the menu. I understand that this behavior is due to the method I created. Is there a way to prevent this event from firing when clicking the link of the current page?

 <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 №1

If you want to prevent executing a method when the route value is the same as the current route, simply pass the route value to the method and check for inequality before proceeding.

 <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>

If you prefer, you can also use this.$route.name to access the route name and adjust the values passed to the method accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My React project is altering the direction of my image

Below is the code snippet used to retrieve the user's favorite products import React, { useEffect, useState } from "react"; import { Pagination, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-red ...

Encountering a 500 error when uploading images with Vue.js using Laravel 8 API

Here is the code snippet for uploading images and passing data to an API. <div class="form-group"> <div class="form-row"> <div class="col-md-6"> <input @change="onFileSelected& ...

A status code of 200 indicates a successful login, which then leads to a 401 status code upon making a

Just recently, I successfully deployed a rails backend and a vue frontend to Heroku. Everything was working fine until today when I encountered a problem while trying to log in to the web app. Immediately after logging in, I started receiving 401 responses ...

Activate the popup for sharing or bookmarking by clicking on a regular link

I am currently utilizing a Share/Bookmark script: <div class="singles-right"> <a href="#" class="bookmark"></a> <script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script> <a href="#" clas ...

Sending a JavaScript variable to PHP in order to specify the timezone

I'm working on setting the timezone for every user in the navbar.php file that's included on all pages of my website. After finding a helpful js script, I am able to echo the variable 'Europe/Brussels' to identify my timezone correctly. ...

How can the 'selected' attribute be assigned to 'select/option' tags depending on the option value?

In my code, I have a select input with various options and values. I want to set the 'selected' attribute for the option that corresponds to a specific value X. Here is an example: // If x=3, I want the option with value=3 to be marked as 's ...

PHP fails to return response to jQuery AJAX request

I am encountering issues with my jQuery AJAX requests in PHP. What could be wrong with my simple example? index.php - includes loading JS, PHP files, and defining a button and a paragraph. <html> <head> <script src='jquery ...

What methods can be used to secure Next.js API routes and prevent them from being directly accessed through the URL

I am seeking a solution for concealing the response data of next.js API routes when accessed through URL. I need to protect certain sensitive information from direct access by users. ...

Executing the Angular 2 foreach loop before the array is modified by another function

Currently, I am facing some difficulties with an array that requires alteration and re-use within a foreach loop. Below is a snippet of the code: this.selectedDepartementen.forEach(element => { this.DepID = element.ID; if (this.USERSDepIDs. ...

Error message: Object literal is limited to declaring existing properties

The source code was obtained from this Codesandbox demo: CodeSandbox - Cover Image Example Subsequently, an .eslintrc configuration file was generated with the following content (the only content present): { "extends": "react-app" } However, a TypeScri ...

Buttons in HTML function properly on desktop but are ineffective on mobile devices

My website is almost complete, but I am facing some challenges with the mobile version. All buttons that use JavaScript are not functioning properly, whereas buttons with simple links work perfectly fine. This issue doesn't occur on Chrome when using ...

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?

I found a solution, but it's specifically for Nuxt.js and I'm using the Vue CLI. Is there any way to use dart sass instead of node-sass (default for sass-loader) in Nuxt.js? While the Vue CLI official documentation displays an example utilizing ...

Compel the browser to initiate a reflow by adjusting the CSS

I am currently in the process of building a responsive image slider without relying on jQuery, using CSS3 transitions. The setup is quite simple: there's a viewport with a UL inside, containing relatively positioned LIs that are left floated. Howeve ...

npm update fails to update specific packages

After React was updated to version 0.15 to address the issue of excessive generation of tags, I made the decision to update my project.</p> <p>However, when I ran the command <code>npm update, it only updated to version 0.14.8. Running ...

React Native - The size of the placeholder dictates the height of a multiline input box

Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...

Unable to compile relative path of threejs using browserify and babel

As a newcomer to babel and browserify, I encountered an issue while trying to transpile with browserify and babel. After installing the threejs package and adding the following import: import * as THREE from 'three' Everything worked fine when t ...

Troubleshooting Database Saving Problem with Vue.js and Ruby on Rails

Trying to configure a nested form with Vue.js in a Rails application to save ingredients for a recipe. While all other details of the ingredients are saving correctly, the ingredient name (from an input field) is not getting saved in the database. How can ...

jquery animation does not reset after event occurs

My script is functioning well to animate my elements, but I am facing an issue where when the function is called again after a timer, the elements move to their correct positions but do not initiate a new animation. The goal of the function updateFlights( ...

Heroku-hosted application experiencing issues with loading website content

I have been working on a nodejs application that serves a web page using express and also functions as a discord bot. The app runs smoothly on localhost with both the web page and discord functionalities working correctly. However, when I deploy it to Hero ...