How can I prevent v-btn from triggering a route when clicked, but still display the active state based on the route?

My toolbar menu is looking great, with v-btn as the activator. However, I am facing an issue on mobile devices where hover doesn't work. Whenever I click on the button, it triggers the route instead of just opening the menu. I have set :on route to automatically highlight the current route. I'm not sure how to make the v-btn open the menu without triggering the route, while still showing the selection based on the route or sub-route of its child.

<v-menu class="toolbarMenu" offset-y open-on-hover transition="slide-y-transition">
          <v-btn :to="{ path: `${constants.portfolioPath}`}" flat slot="activator">
            <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
            {{titles.portfolioMenu}}
          </v-btn>
          <v-list two-line>
            <ListItem :subtitle="titles.portfolioProjectsPage"
                      :title="titles.portfolioProjectsMenu"
                      :to="{name:constants.portfolioProjectsRoute}" icon="business"/>
            <ListItem :subtitle="titles.portfolioVideosPage"
                      :title="titles.portfolioVideosMenu"
                      :to="{name:constants.portfolioVideosRoute}" icon="movie"/>
            <ListItem :subtitle="titles.portfolioPicturesPage"
                      :title="titles.portfolioPicturesMenu"
                      :to="{name:constants.portfolioPicturesRoute}" icon="image"/>
          </v-list>
        </v-menu>
javascripttypescriptvue.jsvuetify.js

Answer №1

It appears that Vuetify buttons utilize vue-router's router-link for handling clicks and router redirects, which means you have the ability to customize the default behavior of the button.

<v-btn :to="{ path: `${constants.portfolioPath}`}" 
       flat 
       slot="activator"
       @click.native.prevent="someEmptyMethod"

>
    <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
    {{titles.portfolioMenu}}
</v-btn>

Next, in the script section.

methods: {
    someEmptyMethod() {
        // Additional actions could also be included here
    }
}

Answer №2

It turned out to be a bit more intricate in the end, but ultimately solvable. Here is the pertinent code snippet:

<template>
   ...
    <v-menu class="toolbarMenu" offset-y open-on-hover 
            transition="slide-y-transition" v-model="isPortfolioMenuShown">
      <v-btn :class="{'disable-events': isPortfolioMenuShown}" :to="{ path: `${constants.portfolioPath}`}"
             @click.native.stop.prevent.capture="onPortfolioMainMenuButtonClick()"
             flat slot="activator">
        <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
        {{titles.portfolioMenu}}
      </v-btn>
      <v-list two-line>
        <ListItem :subtitle="titles.portfolioProjectsPage"
                  :title="titles.portfolioProjectsMenu"
                  :to="{name:constants.portfolioProjectsRoute}" icon="business"/>
        <ListItem :subtitle="titles.portfolioVideosPage"
                  :title="titles.portfolioVideosMenu"
                  :to="{name:constants.portfolioVideosRoute}" icon="movie"/>
        <ListItem :subtitle="titles.portfolioPicturesPage"
                  :title="titles.portfolioPicturesMenu"
                  :to="{name:constants.portfolioPicturesRoute}" icon="image"/>
      </v-list>
    </v-menu>
...
</template>

    <style lang="stylus" scoped>
       .toolbarMenu
         top: 50px

      .disable-events {
        pointer-events: none
      }
    </style>

    export default class... {    
        isPortfolioMenuShown = false

        onPortfolioMainMenuButtonClick = () => this.isPortfolioMenuShown = true
    }

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

In the absence of an Avatar, verify the gender from the JSON data and insert it into the image

I have created my very first app where users can upload their avatars and set their gender. If a user (in this case, a girl) does not upload an avatar, I want to check the JSON data for their gender information. Based on this gender information, I want to ...

javascriptangularjsjson

Preserving the original "this" context while binding a callback for a React child

class Parent extends React.Component { constructor(props) { super(props) this.handleChildOnClick = this.handleChildOnClick.bind(this) } handleChildOnClick() { /* Here, I want to perform an action that involves both Child and Parent. ...

javascriptreactjsthis

Is the image overlay experiencing a flickering issue?

Last time, none of the solutions seemed to work quite right with the project, so let me try asking the question in a slightly different way this time. Basically, I have an image that, when someone hovers their mouse cursor over it, a div appears (containi ...

javascriptjquery

Automatically reveal or conceal an element based on the entry of a value in an input field, without relying on the keyup() or click events

I have a form field with a Bootstrap Datepicker that populates an <input> tag with a selected date. <div class="wrapper"> <div class="form-group"> <label>Select Date</label> <div class="input-group"> ...

javascriptjqueryhtmlcss

Is there a way to filter out only the objects from the JSON data and exclude the strings?

I am facing an issue while looping through a JSON object. The presence of strings in the JSON is causing the loop to fail. How can I iterate only through the objects in the JSON without affecting the loop? My main goal is to iterate through the objects co ...

javascriptjson

The color input click event does not work properly when triggered within a context menu event

This may sound a bit complicated, but let me try to explain it clearly. I'm working on a web app where I want users to be able to change the background color of certain divs. I plan to use a color picker interface for this purpose and utilize the con ...

javascriptjqueryevent-handlingjquery-eventscolor-picker

The issue of returning a boolean value in an rxjs function leading to failure

Hey there, I am currently learning about rxjs and I want to create an observable that returns either true or false. This is my attempted code: checkLoggedIn(): Observable<boolean> { // Check with the server if the user is logged in if(this._tok ...

angulartypescriptrxjs

Proper method for declaring a global variable within a React component

In the process of working on my react.js project, I have encountered a situation where I need all components to be able to access an object before the main component is rendered. My current approach involves passing the object as a prop to the main compo ...

javascriptreactjsglobal-variablescomponents

Alter the color scheme using jQuery

Exploring the world of websites, I've come across many with a unique color switch feature. Users have the ability to choose a color, and the entire page transforms to match their selection. Check out these links for some examples... http://csmthe ...

javascriptjquerycssplugins

How to effectively employ Mongoose for filtering and implementing pagination in Node.js applications

After successfully retrieving all the data in my node.js code using Profile.find(), I encountered a 500 error when attempting to add a filter in the API. Profile.js const mongoose = require('mongoose'); const Schema = mongoose.Schema; //Create ...

javascriptnode.jsmongoose

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

I have a Node application using Express that incorporates TypeScript with Babel. Recently, I attempted to create a UserController which includes a private property called _user: User and initialize it within the class constructor. However, every time I ru ...

node.jstypescriptexpress

Checking the validity of date inputs - microservice for timestamps

I'm encountering an issue while attempting to validate my date input. I've tried using moment js, but it seems there's a problem. The error message "date invalid" keeps popping up! Here is the code snippet: app.get("/api/timestamp/:date_s ...

javascriptnode.jsexpressmomentjs

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

javascriptjquerycssruby-on-railssprockets

Is there a JavaScript/jQuery timer for re-invoking a method?

Currently, I am developing a basic animation with jQuery that utilizes the hover method. The issue arises when a user hovers over the same image twice, causing the method to be re-invoked. Any recommendations on how to implement a "timer" to prevent the ...

javascriptjquery

Indeed, verification of an array - values are mandatory only when the array exceeds a length of 1

In my form, each row contains 2 dropdowns and I have the ability to dynamically add or remove rows except for the first one. My goal is to allow form submission only if there is one pre-rendered empty row, otherwise the form should not be able to submit if ...

javascriptreactjsvalidationformikyup

The functionality of socketio can only be activated within a function by utilizing the window.alert

I encountered a strange issue while working on my web development project using Flask and vanilla JavaScript. I'm attempting to create a basic chat feature with socketio. Strangely, the functionality only seems to work when I include a window.alert in ...

javascriptpythonflasksocket.io

Tips for resizing an image instead of a line in HTML5 canvas

For instance, we could create a function like this to draw a line: function drawLine(g, n, x1, y1, x2, y2){ g.beginPath(); g.lineWidth = n > 0 ? n : 1; g.strokeStyle = "rgb(0, 128, 32)"; g.moveTo(x1, y1); g.lineTo(x2, y2); g.str ...

javascripthtmlcanvasdrawing

Documentation for npm package that has been published

Recently, I created my very first npm package using TypeScript. However, when I tried to use this package in another project, I realized that I wasn't getting the expected code completion and it was challenging to work with it without proper support. ...

typescripttypescript-typingsnpm-publish

What is preventing me from injecting a service into an Angular factory/injector?

I came up with an authentication service (AuthenticationService) that I utilize for making calls to a WEB API. Recently, I stumbled upon interceptors and got intrigued. I thought it would be interesting to create an interceptor that can intercept requests ...

javascriptangularjs

Using JavaScript to organize and reformat JSON data into grouped structures

In my dataset, I am unable to make any formatting adjustments or modifications. //input json data [ { "Breaks":[ {"points":12,"points_total":12,"average":8.0,"faults":[]}, {"points":17,"points_total":29,"average ...

javascriptarraysjson