CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsstoppropagation
Adri HM
Adri HM

Reputation: 3080

How to avoid @click on only one child component

For example if I click on all the v-card I am redirecting to an other link BUT if I click on the title World of the Day and only on the title I don't want to do nothing. How to avoid to be redirected when clicking on title ?

enter image description here

template>
  <v-card
    class="mx-auto"
    max-width="344"
    @click="goToAnOtherLink"
  >
    <v-card-text>
      <div>Word of the Day</div>
      <p class="display-1 text--primary">
        be•nev•o•lent
      </p>
      <p>adjective</p>
      <div class="text--primary">
        well meaning and kindly.<br>
        "a benevolent smile"
      </div>
    </v-card-text>
    <v-card-actions>
      <v-btn
        text
        color="deep-purple accent-4"
      >
        Learn More
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

Upvotes: 1

Views: 288

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362610

If it's only the title, use the stop event modifier. This is easier than having the logic in the method.

<v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
        <v-card-text>
            <div class="title" @click.stop>Word of the Day</div>
            <p class="display-1 text--primary"> be•nev•o•lent </p>
            <p>adjective</p>
            <div class="text--primary"> well meaning and kindly.<br> "a benevolent smile" </div>
        </v-card-text>
        <v-card-actions>
            <v-btn text color="deep-purple accent-4"> Learn More </v-btn>
        </v-card-actions>
    </v-card>
</v-app>

https://codeply.com/p/2ExpE6PF6F

Upvotes: 2

Kevin You
Kevin You

Reputation: 84

You can wrap your v-card in a div and use absolute positioning to place the title; so that the title is in "front" of the v-card thus clicking on it does nothing.

Pseudo-code

<div>
   <span>Word of the day</span> <!-- use absolute to position inside the div -->
   <v-card></v-card>
</div>

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

Add a class to the title div as well, and check the classes of your event's target inside the function goToAnOtherLink. Then you can use stopPropagation() along with the custom code you have in that function.

new Vue({
  el: "#app",
  data() {},
  methods: {
    goToAnOtherLink(e) {
      if (e.target.classList.contains("title") || e.target.classList.contains("display-1")) {
        e.stopPropagation()
        console.log("Cancelled Navigation!")
      } else {
        console.log("Navigated!")
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
      <v-card-text>
        <div class="title">Word of the Day</div>
        <p class="display-1 text--primary">
          be•nev•o•lent
        </p>
        <p>adjective</p>
        <div class="text--primary">
          well meaning and kindly.<br> "a benevolent smile"
        </div>
      </v-card-text>
      <v-card-actions>
        <v-btn text color="deep-purple accent-4">
          Learn More
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

Upvotes: 1

Related Questions