單擊快速查看按鈕時，Vue阻止路由器鏈接提交

Question

我在路由器鏈接中有一個快速查看按鈕，當我單擊它時，路由器鏈接會繼續提交。 我不希望路由器鏈接提交給快速查看按鈕事件。 相反，我只想在那里顯示快速查看彈出窗口 window。 類似於此鏈接Unconditional的東西。 當您在圖像上使用 hover 時，會顯示一個快速查看按鈕，當您單擊它時，會彈出快速查看 window。 當您只需單擊產品圖片而不是快速查看按鈕時，它會將您帶到不同的頁面。 這就是我想要達到的目標。 我怎樣才能做到這一點？ 如果有不同的方法，我也很想看到。

<router-link tag="li" :to="{name: 'Product', params: {product}}"
             v-on:click.native="getItem">
  <div class="container">
    <img :src="product.image" alt="" class="card-img">
    <div class="overlay">
      <button @click="active = true">Quick View</button>
    </div>
  </div>
</router-link>

Answer 1

這將解決問題：

<button @click.prevent="active = true">Quick View</button>

.prevent 修飾符將阻止按鈕執行默認的操作

或者您可以通過在按鈕上添加 'type="button"' 來實現（它不會觸發提交）

<button type="button" @click="active = true">Quick View</button>

Answer 2

您要做的是防止按鈕單擊時的默認操作。

您可以在此處閱讀有關如何執行此操作的信息： https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

<button v-click.prevent="onClick"></button>

快速閱讀文檔，因為您可能還想使用.stop