Vue event handler sometimes getting $event object passed and sometimes not

user_7048200 0
Viewed 353

I have a situation like this: In a component called "ProductForm" I have a method "addToCart", which will add some product to a cart in an online shop. This is called via button click event.

Now I added a new child component "GiftUpsell", which is essentially just an additional "Add to Cart" button. But it should additionally add another product, passed as parameter to handleAddToCart.

So I modified the handleAddToCart method in ProductForm to accept an optional parameter, as below, and I pass this parameter via an event from the child component "GiftUpsell":

ProductForm.vue

<template>
  <btn @click.native="handleAddToCart">Add to Cart</btn>
  <gift-upsell @upsellAddToCart="handleAddToCart" />
</template>

<script>
import GiftUpsell from '~/components/GiftUpsell'

export default {
  components: { GiftUpsell },
  methods: {
    handleAddToCart(upsellLineItem = null) {
      // ...
    }
  }
}

GiftUpsell.vue

<template>
  <btn @click.native="upsellAddToCart">Add to cart with upsell</btn>
</template>

<script>
export default {
  methods: {
    createUpsellLineItem() {
      // whatever
      return some object;
    },

    upsellAddToCart() {
      const lineItem = createUpsellLineItem();
      this.$emit('upsell-add-to-cart', lineItem);
    }
  }
}

The problem now is: When I use the new upsell add-to-cart button, it works fine. The lineItem parameter is passed as the only parameter to handleAddToCart and the logic works.

When I, however, click on the old, "normal" add-to-cart button, the handleAddToCart method gets the $event as first parameter - which is not present when handleAddToCart is called via the upsell-add-to-cart event.

This is confusing. Why is the $event parameter present when I don't need it, and only the event parameters present (but not event object) when I need the parameters? Is there a way to get rid of this inconsistency?

nuxt.js vue.js
1 Answers

The v-on directive automatically passes the event data to the specified method when only a method name is given. That's what occurs for both @click bindings in your template, and that's also what enables the emitted data (lineItem) to get to handleAddToCart.

These two templates are equivalent:

<btn @click.native="handleAddToCart">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart" />

<btn @click.native="handleAddToCart($event)">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart($event)" />

In the first <btn @click> binding, the button's click event data (the MouseEvent) is passed as the argument to handleAddToCart. To make the <btn>'s click pass nothing instead, you could update the binding to call handleAddToCart without arguments:

<btn @click.native="handleAddToCart()">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart" />

Or be explicit for both v-on bindings:

<btn @click.native="handleAddToCart()">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart($event)" />
user_62771510
Related