A Vue element that has multiple exact click handlers will consistently trigger the click.exact method when clicked with system modifiers

Question

A Vue element that has multiple exact click handlers will consistently trigger the click.exact method when clicked with system modifiers

According to the information found at https://v2.vuejs.org/v2/guide/events.html#exact-Modifier, I am attempting to build an element that triggers different methods based on additional keys pressed at the time of clicking.

<span @click.exact="method1"
      @click.shift.exact="method2"
      @click.alt.exact="method3"
>Click me with or without modifiers</span>

When clicking on the text, method1 is triggered. However, there seems to be an issue where method1 is executed before method2 when SHIFT + Click and before method3 when ALT + Click. The desired behavior is for method1 to only execute on a plain click without any modifier keys being pressed.

Edit: Initially I mentioned using Version 2.5 of Vue, but it appears that the linked version is 2.3, which does not include the "exact" feature.

You can view the complete example codepen here: https://codepen.io/anon/pen/bjKRzV

javascript vue.js vuejs2 event-handling vue-component

Answer 1

Answer №1

It appears that you may be utilizing an incorrect Vue version. If you find yourself working with an outdated version, you will likely need to implement something similar to @click="handleClick", then in the handleClick function, examine the event for properties such as shiftKey or altKey.

For example:

handleClick (event) {
  if (event.shiftKey) {
    this.method2()
  } else if (event.altKey) {
    this.method3()
  } else {
    this.method1()
  }
}

Answer 2

It appears that you may be utilizing an incorrect Vue version. If you find yourself working with an outdated version, you will likely need to implement something similar to @click="handleClick", then in the handleClick function, examine the event for properties such as shiftKey or altKey.

For example:

handleClick (event) {
  if (event.shiftKey) {
    this.method2()
  } else if (event.altKey) {
    this.method3()
  } else {
    this.method1()
  }
}

A Vue element that has multiple exact click handlers will consistently trigger the click.exact method when clicked with system modifiers

Answer №1

Similar questions

Harmonizing database with AJAX-powered webpage

When the radio button is selected, show a variety of buttons

Enumeration field with Conditional logic

How long does it take to delete and recreate a cloudfront distribution using AWS CDK?

Hide selected item in the input field on Treeselect vue.js

Modeling a versatile user system in Mongoose for various user types

Leveraging Environment Variables in Vue.js

Having trouble displaying images in Express JS

Configuration object for Webpack is not valid

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

Retrieving an assortment of objects from a database and showcasing them using React

Is it necessary for Vue single file components (.vue files) to use `export default` or is it possible to use named exports instead?

Boost the frequency of updates in Meteor.observe

What is the best way to access the element menu with element-ui?

Method for creating a randomized layout grid in MaterialUI where each row contains a total of three columns

The element.find() function is experiencing issues when utilizing a templateUrl within a directive

Passing User Authentication State from Express/Passport to a React Client: A Step-by-Step Guide

Master the Art of Crafting Unique URLs

Axios delivers the index.html data to the front end of a React.js application

Save the user input to a dedicated text file