Как избежать @click только на один дочерний компонент

Question

Например, если я нажимаю на всю v-карту, которую я перенаправляю на другую ссылку, НО, если я нажимаю на заголовок World of the Day и только на title, я не хочу ничего делать. Как избежать перенаправления при нажатии на title?

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>

Answer 1

Добавьте также класс к заголовку div и проверьте классы цели вашего события внутри функции goToAnOtherLink. Затем вы можете использовать stopPropagation() вместе с пользовательским кодом, который есть в этой функции.

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/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/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>

Answer 2

Если это только title, используйте модификатор события stop. Это проще , чем использование логики c в методе.

<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

Answer 3

Вы можете обернуть свою v-карту в div и использовать абсолютное позиционирование для размещения заголовка; так что заголовок находится «впереди» v-карты, поэтому нажатие на нее ничего не делает.

Псевдокод

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