Click event in vuejs on custom component?

Question

I have in my main component one custom component and I need to fire a custom event on click, I tried it in this way:

<child-component @click="fireCustomEvent"></child-component>

This does not work and I tried to solve this problem with adding @click.native

<child-component @click.native="fireCustomEvent"></child-component>

With .native it works but it fires the event every time if I click inside my "child-component".

Can I avoid somehow to fire this event again if I click inside "child-component"?

If you bind the click on a div, the event will be triggered when any of the component inside is clicked. Maybe you should explain what do you want to click and what not. Show us what is inside your <child-component>. — Christhofer Natalius
– Christhofer Natalius, Commented May 31, 2019 at 9:12

skribe · Accepted Answer · 2019-05-31 08:25:27Z

4

To do this you need the click handler inside your child component and then emit an event to the parent.

In child component:

//child component
<template>
   <div @click="$emit('wasClicked')")>click here</div>
</template>

In parent component:

//parent component
<template>
   ...
   <child-component @wasClicked="fireCustomEvent"></child-component>
</template>

answered May 31, 2019 at 8:25

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marco Tesini Over a year ago

But the problem is @click does not work on custom component. Is that not possible?

skribe Over a year ago

Sure @click works, but the way you have it <child-component @click="..."> here it would be listening for an emited "click" event from inside the child component itself. @click is shorthand for v-on:click and works a bit different when used on a child component. vuejs.org/v2/guide/…

Marco Tesini Over a year ago

it works. many thanks. Is there ok to pass some data like: $emit('wasClicked', category.id)? Can I get then the data from this event in child component?

skribe Over a year ago

Yes certainly you can pass data with the emitted event and use it your "fireCustomEvent" method

Marek Barta · Accepted Answer · 2019-10-23 14:43:51Z

0

I had a similar problem and I solved it by adding div to wrap the custom component and it worked. So try this it should do the job.

<div @click="fireCustomEvent">
    <child-component></child-component>
</div>

answered Oct 23, 2019 at 14:43

Marek Barta

3891 gold badge4 silver badges19 bronze badges

Comments

Slim · Accepted Answer · 2019-05-31 08:26:42Z

-1

You should show the code in the component that emit the event.

You must have something like this:

//code that trigger an click event
this.$emit('click');

//or if you you to pass some data
this.$emit('click','some_data');

.native doesn't need to be used here.

answered May 31, 2019 at 8:26

Slim

1,2761 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Click event in vuejs on custom component?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related