javascript - 如何使 vuetify 复选框仅在单击框而不是标签时才做出反应？

Question

我有一个带有标签插槽注入模板的简单复选框，如下所示：

<v-checkbox
  v-model="selectAllRequired"
  class="not-so-isolated">
  <template v-slot:label>
    <button
      @click="changeOrder">
      <v-img
        max-width="14"
        class="image list-sort-icon"
        :src="directionIcon" />
      <span class="list-title">ROLA</span>
  </button>
  </template>
</v-checkbox>

当有人点击提到的标签时，我已经指定了一些行为。问题是该盒子用于其他工作。如何仅在单击框时勾选复选框，并忽略标签单击？可能吗？谢谢你的帮助。

标签： javascripthtmlcssvue.jsvuetify.js

Answer 1

您还可以在您的方法之上使用Event.stopPropagation() 。changeOrder(event)

例子：

https://jsfiddle.net/4ya9gqps/