Trigger another click event inside nuxt-link

Question

<div>
  <nuxt-link to="/home">
    <h1>Title text</h1>
    <p>Product description</p>
    <p @click.stop="addCart()">Add to cart</p>
  </nuxt-link>
</div>

I'm not able to click my addCart function. If I click it's just redirecting to home page.

Answer 1

I solve this by prevent event modifier in vue

@click.prevent="addCart()

or

<div>
    <nuxt-link to="/home">
        <h1>Title text</h1>
        <p>Product description</p>
        <p @click.prevent="addCart()">Add to cart</p>
    </nuxt-link>
</div>

Answer 2

This should solve your problem:

@click.prevent="addCart()"