Reputation: 879
<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.
Upvotes: 0
Views: 2560
Reputation: 10882
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.
Upvotes: 2