custom event not caught in HTML Vuejs

Question

I have an HTML partial like:

<div v-on:customevent="test">
   <button @click="launchEvent">TestEvent</button>
</div>

In my component I have this:

methods:{
   launchEvent(){
      this.$emit('customevent');
   },
   test(){
      console.log("I'm in");   
   }
}

But even tt runs correctly function launchEvent it doesn't launch function test as the event was not caught because the event is correctly launched because if I try set in created():

this.$on('customevent',function(){
   alert("customevent launched");
});

The alert is correctly launched, so, Is it possible listen custom event directly on HTML?

tony19 · Accepted Answer · 2022-07-16 00:22:27Z

1

Edited after OP pointed that the answer wasn't working

Those events are meant to be used in a parent-child component relationship, as explained in the documentation

So, in your example, you should have a parent component catching the event and the child component emitting it.

Your parent will looks like :

<parent @custom-event="customEventCatched">
  <child></child>
<parent>

And your child component's template should be like :

<button @click="$emit('custom-event')">Emit<button>

edited Jul 16, 2022 at 0:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 5, 2017 at 10:03

Thomas Ferro

2,45221 silver badges34 bronze badges

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

3 Comments

LorenzoBerti Over a year ago

thankyou! I tried but it doesn't work. I edit my question with your advise

LorenzoBerti Over a year ago

jsfiddle.net/dangvanthanh/3m6s54qx following this jsfiddle I found problem

Thomas Ferro Over a year ago

My bad, I forgot to say that those events are meant to notify a parent component, I'm updating the answer.

Richard Matsen · Accepted Answer · 2017-10-05 09:50:20Z

1

The syntax is incorrect in the first div, 'clicked' should be 'click', as in

<div v-on:click="test">Test Event</div>

or the short-hand syntax as used on the button,

<div @click="test">Test Event</div>

answered Oct 5, 2017 at 9:50

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

5 Comments

LorenzoBerti Over a year ago

hello thank you, not, the name is exactly clicked, because i need a CUSTOM events, it could be named "customevent", but i would listen a custom event, not click event. I edit my answer for more clarity

Richard Matsen Over a year ago

$emit events is usually for communicating to the parent, but in case there's another reason to catch it in the same component, try defining the method with onTest:function() {...}

LorenzoBerti Over a year ago

yes, following this jsFiddle I found the problem. jsfiddle.net/dangvanthanh/3m6s54qx

Richard Matsen Over a year ago

Could you post your fixed code in an answer please?

LorenzoBerti Over a year ago

yes I answered my question my problem was a $emit, it was wrong because at first I had used a bus general, and the parent/child component. thankyou for your advise

Neil Merton · Accepted Answer · 2020-01-14 20:04:14Z

0

My problem was that I not use correctly event:

now my code is:

<div>
   <MyComponent @customevent="eventCatched"></MyComponent>
</div>

And in MyComponent there is a function like:

test(){
   this.$emit("customevent");
}

In parent component I have a function eventCatched

eventCatched(){
  console.log("catched");
}

following this jsfiddle

https://jsfiddle.net/dangvanthanh/3m6s54qx/

edited Jan 14, 2020 at 20:04

Neil Merton

5734 silver badges20 bronze badges

answered Oct 5, 2017 at 10:49

LorenzoBerti

6,98410 gold badges53 silver badges93 bronze badges

Collectives™ on Stack Overflow

custom event not caught in HTML Vuejs

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related