Leonard Ge Leonard Ge - 10 months ago 79
Javascript Question

Prevent route change in Vue router

<router-link to="SOME_ROUTE">
<div class="outer-div">
<div class="inner-div" v-on:click="doSomething"></div>

Some I am trying to create a link which will have a image in it. I am trying to make the inner div to do something without triggering the route change, how am I be able to achieve this? I have tried the event modified
, but it doesn't seem to work, the route will still change after the
is clicked. Thanks in advance for your kind help.

Answer Source

I think you just need to use

<div class="inner-div" v-on:click.prevent="doSomething"></div>

instead of

<div class="inner-div" v-on:click.stop="doSomething"></div> 

to prevent the default action. See: https://stackoverflow.com/a/8952200/6279569
Here's the demo.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download