0

In the Vue documentation at https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth there is an explanation for “on” and “nativeOn”:

// Event handlers are nested under `on`, though
  // modifiers such as in `v-on:keyup.enter` are not
  // supported. You'll have to manually check the
  // keyCode in the handler instead.
  on: {
    click: this.clickHandler
  },
  // For components only. Allows you to listen to
  // native events, rather than events emitted from
  // the component using `vm.$emit`.
  nativeOn: {
    click: this.nativeClickHandler
  },

We are trying to listen to an “input” event from a custom component we created. We noticed that the event did not get detected in the on property, so we tried nativeOn and we were surprised to find that this worked. We were surprised because the docs say nativeOn:

Allows you to listen to // native events, rather than events emitted from // the component using vm.$emit

In this case, we are using an event emitted from a (custom) component using vm.$emit.

Here is a snippet from our code demonstrating the above:

on: {
    input: (event) => {
        console.log('hi'); // We did not receive "hi" in the console
    }
},
nativeOn: {
    input: (event) => {
        console.log('hi2'); // We did receive "hi2" in the console
    }

Any clarification on why we would need nativeOn to listen to “input” events from a custom component, or on when to use nativeOn vs. on and the differences therein would be most appreciated. Thanks in advance!

tony19
  • 125,647
  • 18
  • 229
  • 307
Bryan Miller
  • 3,262
  • 4
  • 27
  • 51
  • 2
    Sounds like the `vm.$emit` isn't firing as you are expecting it to. Can you share all of that code? – thanksd Jul 01 '19 at 16:52
  • It is a dynamic component, so there are actually several associated components that the above code handles. One of these components receives an input event from one of its children components and then re-broadcasts that event via `@input="$emit('input', $event.target.value)"` and I can verify that this event is firing by looking at the "events" tab in Vue DevTools: `name:"input"` `type:"$emit"` `source:""` `payload:Array[1] 0:"the correct (String) payload"` – Bryan Miller Jul 02 '19 at 04:30
  • 1
    If the child component uses `` as its root element then the `nativeOn` will still pick up on the native `input` event. Try examining the `event` object passed to the `nativeOn` listener, you should find it's the DOM event, not the one you're emitting. For diagnostic purposes I suggest renaming your custom event to something other than `input` so you can clearly see what is triggering what. My guess would be that `on` isn't working because you have an extra layer of wrapper component that isn't re-emitting the relevant event but that's just speculation without being able to see the code. – skirtle Jul 02 '19 at 06:52
  • `nativeOn` is doing exactly what it's supposed to here. @skirtle's explanation is most likely what's going on, however if you are emitting events via `$emit` then you can only receive them with `on`. We can't help you much beyond this without seeing your code. – Decade Moon Jul 02 '19 at 08:59

0 Answers0