CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Leonard Ge
Leonard Ge

Reputation: 879

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.

Upvotes: 0

Views: 2560

Answers (1)

choasia
choasia

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

Related Questions