Listen to custom event in Vue.js

Question

Vue.js works great with browser events such as click or mousedown. But not work at all with custom events. Here is the code:

HTML:

<div id="app" style="display: none" v-show="true">
    <div v-el:ping v-on:ping="ping">
        <div>
            <button v-on:click="click">Click</button>
        </div>
    </div>
</div>

JavaScript:

new Vue({
    el: '#app',
    data: {
    },
    methods: {
        ping: function (event) {
            console.log('Vue ping', event);
            alert('Vue ping');
        },
        click: function (event) {
            jQuery(event.target).trigger('ping');
        }
    },
    ready: function () {
        console.log(this.$els);
        jQuery(this.$els.ping).on('ping', function (event) {
            console.log('jQuery ping', event);
            alert('jQuery ping');
        });
    }
});

I expect alert with Vue ping and jQuery ping. But only the later pops up.

CodePen

@John ping method (where alert('Vue ping')) doesn't get called — vbarbarosh
– vbarbarosh, Commented Mar 22, 2016 at 14:52

danronmoon · Accepted Answer · 2022-03-16 15:24:33Z

9

Vue has its own internal system for custom events, which you should use instead of jQuery / native DOM events:

click: function (event) {
  // jQuery(event.target).trigger('ping');
  
  this.$dispatch('ping', event.target) // send event up the parent chain, optionally send along a reference to the element.
  
  // or:
  this.$emit('ping') // trigger event on the current instance
}

Edit: $dispatch is for parent-child communication, You seem to want to trigger a custom event from within the same comonent. In that case, you could instead simply call a method.

If you still want to listen to a custom event inside the same component, you:

want to use $emit
cannot use v-on:custom-event-name in the template (that's only to be used on components). Rather, add the event method to the events::

events: { ping: function() {....} }

edited Mar 16, 2022 at 15:24

danronmoon

3,8735 gold badges36 silver badges58 bronze badges

answered Mar 22, 2016 at 16:15

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

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

5 Comments

vbarbarosh Over a year ago

It doesn't work. "This event system is independent from the native DOM events and works differently." I think it for communication between Vue components, rather than between DOM nodes.

Linus Borg Over a year ago

It does not work how? Since you are using Vue.js, I was under the impression you wanted to communicate beweteen components?` Why would you want to communicate between DOM nodes in Vue - since the goal of Vue is to decouple the business logic from the DOM? Maybe we could help you translate your usecase into "the Vue way" if you provide additional information about it.

vbarbarosh Over a year ago

I would be very thankful if you fix source code I provided. The question was: how to attach a custom event handler in Vue so that it may intercept events emitted by jQuery.trigger.

Linus Borg Over a year ago

jQuery emits DOM events. Vue does use its own event system. So the answer is: you cannnot use v-on for DOM events. You will have to use jQuery.on() with callbacks, set up in ready() like you already demonstrated. Depending on the usecase, this could be extracted into a custom directive (see docs).

Joeri Over a year ago

So how then can I listen to svg events that are in my embedded svg with internal vue custom event system?

marc_s · Accepted Answer · 2017-02-01 17:57:39Z

You should avoid to mix a dom events and vue-components related ones because it's a different layers of abstraction.

Anyway, if you still want to do that, I think you need to cache this.el inside a vue-component instance or take it via computed-property like this

{
    computed : {
        jqueryEl(){ return $(this.el) }
    }
}

And then trigger a custom jQuery events by this.jqueryEl.trigger('ping').

Sure to properly take care of keep the element's bindings up to date! For example you can bind jQuery events dynamically (and also unbind on component destroy!) like this:

 ready : function(){
    jQuery('body').on('ping.namespace', '[data-jquery="ping"]', function(){ ... })
 },
 destroy : function(){
      jQuery('body').off('ping.namespace')
 }

And don't forget to add attribute [data-jquery="ping"] to an element which you would like to response a ping event.

Hope this information helps you to achieve the expected result.

Jeff · Accepted Answer · 2016-03-22 15:11:32Z

2

Here it is in vanilla JS:

HTML:

<div id="app">
  <div v-el:ping>
    <div>
      <button v-on:click="click">Click</button>
    </div>
  </div>
</div>

JS:

(function() {

  new Vue({
    el: '#app',
    data: {
      event: null
    },
    methods: {
      ping: function(event) {
        alert('Vue ping');
      },
      click: function(event) {
        this.$els.ping.dispatchEvent(this.event);
      }
    },
    ready: function() {
      this.event = document.createEvent("HTMLEvents");
      this.event.initEvent("ping", true, true);
      this.$els.ping.addEventListener('ping', this.ping);
    }
  });

})();

pen: http://codepen.io/anon/pen/wGdvaV?editors=1010#0

answered Mar 22, 2016 at 15:11

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

2 Comments

vbarbarosh Over a year ago

This is meaningless. I use jQuery(event.target).trigger('ping') because I don't know who will handle this event. I need to inform a parent that something happened with its descendant.

vbarbarosh Over a year ago

Yep. stackoverflow.com/questions/36156465/…

Umair Ahmed · Accepted Answer · 2023-08-23 00:25:14Z

I came across the same problem and the solution is pretty simple if you're using v-autocomplete from Vuetify.

What I did

Add a key in data, I'm calling it searchText
Bind that property with v-model:search
Add an event handler called @update:modelValue
Declear a method and add that method on @update:modelValue="emptySearchText"

Here is an example.

<v-autocomplete
  label="Your Label"
  :items="items"
  v-model="selected"
  v-model:search="searchText"
  @update:modelValue="emptySearchText"
  multiple>
</v-autocomplete>

data: () => ({
  searchText: null
})


methods: {
  emptySearchText () {
    this.searchText = '';
  }
}

Check this out for more information. https://vuetifyjs.com/en/api/v-autocomplete/#events-update:modelValue

Collectives™ on Stack Overflow

Listen to custom event in Vue.js

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related