單擊內部按鈕時防止單擊父A標簽

Question

我對索引頁面上的產品卡有疑問。 在產品卡內，我有 Vue 組件來呈現表單（數量和添加到購物車按鈕）。 當我點擊添加到購物車按鈕時，我得到了預期的結果。 響應被發送到根 vue 組件，然后我看到產品已添加到購物車的 toast 通知。 但是，當我單擊加號、減號按鈕或輸入字段時，會從父 A 標記觸發 href 鏈接。

如何禁用它？ 單擊 div 內的按鈕時，我發現此防止單擊父級

但它只有在我將 A 標簽放入 vue 組件時才有效。 我不想在 vue 中放入太多的 html。

        @foreach ($products as $product)
        <a href="{{ $category->fullpath.'/'.$product->sef }}" class="catalog__card">
          <div class="catalog__card-img"><img src="/storage/img/products/{{ $product->mediumpic }}" alt="{{ $product->title }}"></div>

          <div class="card__properties">
            <div class="card__price"><span>{{ $product->price }}<span class="currencySymbol">₽</span></span></div>
            <div class="card__stock">
              @if ( $product->stock > 0 )
              <i class="far fa-check-circle text-success"></i><span class="text-success"><strong> on stock</strong></span>
              @else
                <span><strong> on request</strong></span>
              @endif
            </div>
            <addtocart @added_to_cart="updateCart"></addtocart>
          </div>
          <div class="catalog__card-title"><span>{{ $product->title }}</span></div>
        </a>
        @endforeach

在 Vue 組件中，我有以下內容

<template>

  <div class="cart">
    <form method="POST" id="add_to_cart" action="/add_to_cart" @submit.prevent="onSubmit">
      <input type="hidden" name="_token" :value="csrf">
      <div class="quantity">
        <button type="button" class="minus_quantity" v-on:click="minus_quantity" v-long-press="300" @long-press-start="longMinusStart" @long-press-stop="longMinusStop">-</button>
        <input type="number" class="input-text qty text" step="1" min="1" max="9999" name="quantity" value="1" title="Qty" v-model.number="quantity">
        <button type="button" class="plus_quantity" v-on:click="plus_quantity" v-long-press="300" @long-press-start="longPlusStart" @long-press-stop="longPlusStop">+</button>
      </div>
      <button type="submit" name="add-to-cart" class="button-cart"><i class="fas fa-cart-plus"></i><span> order</span></button>
    </form>   
  </div>

</template>


<script>
    import LongPress from 'vue-directive-long-press';

    export default {

        name: "addtocart",

        data: function () {
          return {
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            quantity: 1,
            plusInterval: null,
            minusInterval: null,
            success: false,
            errors: []
          }
        },

        directives: {
          'long-press': LongPress,
        },


        props: [],


        computed: {
          getName(){
             return this.$store.getters.Name
          }
        },

        methods: {
          // add to cart quantity plus and minus buttons
          // short mouse click event
          parent() { alert('you clicked the parent') },

          minus_quantity() {
            if (this.quantity > 0) {this.quantity -= 1}
          },
          plus_quantity() {this.quantity += 1},
          // long press buttons
          longPlusStart() {
            this.plusInterval = setInterval(() => {
              this.quantity += 1
            }, 100)
          },
          longPlusStop() {
            clearInterval(this.plusInterval)
          },
          longMinusStart() {
            this.minusInterval = setInterval(() => {
              if (this.quantity > 0) {this.quantity -= 1}
            }, 100)
          },
          longMinusStop() {
            clearInterval(this.minusInterval)
          },

          onSubmit() {
            axios.post('/add_to_cart', this.$data)
            .then(this.onSuccess)
            .catch(error => this.errors = error.response.data);
          },
          onSuccess(response) {
            this.success = true;
            this.$emit('added_to_cart', response);
          },

        },

        mounted() {


        },


    }
</script>

Answer 1

您可以對加號、減號按鈕使用“v-on:click.stop”指令，而不是“v-on:click”

閱讀本文以獲取更多信息https://v2.vuejs.org/v2/guide/events.html

Answer 2

使用v-on:click.prevent代替v-on:click我解決了這個問題

Answer 3

使用<a href="...">標記父組件和內部<button @click="someAction">標記，您必須將@click="someAction"替換為@click.prevent="someAction" 。

它對 m 來說就像一個魅力！