Leonard Ge Leonard Ge - 2 months ago 18
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>
</div>
</router-link>


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
v-on:click.stop
, but it doesn't seem to work, the route will still change after the
.inner-div
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.