Vue: Binding of events on dynamic components produce warnings

[Zsavajji]

Version

2.6.11

Reproduction link

https://jsfiddle.net/nueorsq5/

Steps to reproduce

Load page, the binding of native events produces warning on the tag.

What is expected?

Should not trigger warning, cause the component is dynamic and could be a component or a DOM node depending on the data passed.

What is actually happening?

It produces warning for every .native event bound to a DOM node.

---

The warning is indeed correct, but makes difficult to create dynamic component with such events, since the object notation does not permit to specify native modifiers.

[icleolion]

This issue wasn't present in 2.6.10. It came in with this commit 861aea1

For clarity this produces errors in console, not warnings as specified in the commit.

It's affecting a couple of Vuetify components also. https://github.com/vuetifyjs/vuetify/issues/9999

Is this something that is going to be improved in Vue 2.x or does code need to be amended to support this change?

[Zsavajji]

In fact, my question is how should we amend the code, since i found no dynamic way to do it.

[maoberlehner]

I think the warning is a good thing because of the reason stated in https://github.com/vuejs/vue/pull/9884

Currently if we have a .native modifier applied to event handler on native HTML element, it will break the handler

But as also stated in this pull request:

An ideal solution would be also making .native work on elements while throwing a warning but it might be a subject for another PR.

With the addition that it shouldn't throw a warning at least when used that way with dynamic components.

[icleolion]

I’d like to clarify again that these are not showing up as warnings in console. They are showing up as errors. As the original PR specified warnings could we have this issue re-titled and tagged as bug in addition to discussion label please?

[gitpaladin]

A <component> can be instanced as a normal DOM element or a vue component. So the developer need to bind either .native or normal event to the <component>

[saraha33]

hi, not sure if necessary (because the problem seems pretty clear already) but i just wanted to add that i have the same problem - my scenario is the following:

<template>
    <component 
        :is="element"
        @click.native="setActivePage"
        @click="setActivePage">
    </component>
</template>

where "element" can either be a router-link or a regular div element - but if it is a div element i get the warning/error

anyway thanks @maoberlehner for explaining what is happening (and yes - i like your suggestion

With the addition that it shouldn't throw a warning at least when used that way with dynamic components.

hope this can be done at some point!

[jerryjappinen]

Ran into this as well. What's the status on solving this?

I could think of a few options as I tried to find a workaround:

• Support modifiers in programmatic binding
• Support modifiers in dynamic directive arguments syntax
• Suppress warning about a binding that will be removed, as dynamic directive arguments syntax will compute into null (I tried binding with @[nativeclickeventname].native="onClick" where nativeclickeventname is null when I don't want the native binding, but this also produced the error)
• Suppress native warnings always

Right now it's basically impossible to make a transparent wrapper button that can render either a router-link or a button, and wrap that component into a parent that attaches more behavior to click events (in my case I'm trying to make a wrapper component that makes a sound on button click).

[KaelWD]

Is there any reason why nativeOn can't bind event listeners to native elements the same as on already does? There are some cases that can't be determined just by branching on isVueComponent ? nativeOn : on, like a functional component rendering an svg element and passing down ctx.data (https://github.com/vuetifyjs/vuetify/issues/9999#issuecomment-635136478)

[Akryum]

@yyx990803 Using <VueButton> in the devtools for example produces a lot of console error because of this necessary line: https://github.com/vuejs/ui/blob/e6331afbc6aeb8ad83f619f3bfd17fdc3484d27e/src/components/VueButton.vue#L19