Vue JS : right click event directive

Question

I know these vue event handlers:

@click : mouse left-click @dblclick : mouse double click 

What could be the handler/directive to detect a right-click? Need to implement a custom Context menu in Vue Tree view.

Answer 1

<button @contextmenu="handler($event)">r-click</button>  methods : {     handler: function(e) {         //do stuff         e.preventDefault();      } } 

@contextmenu will do the trick. The preventDefault is to avoid showing the default context menu.

Shorter, as indincated in the comment :

<button @contextmenu.prevent="handler">r-click</button> 

Now the prevent modifier takes care preventing default behaviour.

Edit: For this to work with vue components, add a .native event modifier.

<custom @contextmenu.native="handler"></custom>