Vue-router: Router-Link doesn't support v-on:click

[Bodekaer]

This doesn't fire the click event:

<router-link v-on:click="doSomethingCool" to="/">Home</router-link>

Is this intentional?
If yes, what is the recommended approach to have Vue click bindings in Router Links?

[LinusBorg]

<router-link v-on:click.native="doSomethingCool" to="/">Home</router-link>

http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

[bigggge]

@LinusBorg What is the meaning of “a native event”? Thanks

[LinusBorg]

A real Browser event, not a Vue event (which is created with $emit().

Further information available in our guide on the website.

[ricardobanegas]

For future reference, if you really need to use it as a Vue-event (not using the .native-approach), then you can do this instead:

<router-link to="/">
     <span v-on:click="doSomethingCool">Home</span>
</router-link>

[LinusBorg]

...that would also react to a native click event, though - not a Vue-event :-P

[rpkilby]

@LinusBorg - just making sure I understand. The most recent example is reacting to a native event because the v-on directive is attached to a native HTML element. In the OP's example, the event is a Vue event because the v-on directive is attached to a Vue component.

[LinusBorg]

@rpkilby exactly right.

[jonecir]

Olá, como que faço para deixar os links desabilitados e só ativá-los mediante alguma condição?

[carvalhoviniciusluiz]

@jonecir esses pontos da documentação podem te ajudar!
att,

https://vuejs.org/v2/api/#v-cloak
https://vuejs.org/v2/guide/conditional.html

[BastienPvr]

Hi ! So, if I do a @event.native=... with an event that I created, it won't trigger the event ?
And thanks a lot for the solution

[aykxt]

<router-link v-on:click.native="doSomethingCool" to="/">Home</router-link>

http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

Since v-on:click.native is deprecated now, is there any other approach to handle this without creating an wrapper div?

[jgujgu]

Since v-on:click.native is deprecated now, is there any other approach to handle this without creating an wrapper div?

Using @click.native works:
https://stackoverflow.com/a/42092519/3068344