CODEWITHSUNDEEP
vue.jsvue-component
kaiser
kaiser

Reputation: 135

Have two different click events on single div

I have to execute a div like this. When the user clicks on the card, it will be redirected to a different page, but when the user clicks on the button inside the card, it will be redirected to another page.

     <v-ons-card
      @click="goToPage1()"
    >
      <div>
        // content
      </div>

      <div class="card-btn">
        <v-ons-button
          @click="gotopage2()"
        >
          View
        </v-ons-button>
      </div>
    </v-ons-card>

In this implementation, when I click the button, it also triggers the card click event and then triggers the button click event. Is there any way I can prevent this?

Upvotes: 0

Views: 327

Answers (1)

ZecKa
ZecKa

Reputation: 2934

Yes you can use Event Modifier for that. In your case you are searching for @click.stop.

So you can do as follow:

<v-ons-button @click.stop="gotopage2()">

Upvotes: 2

Related Questions