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. vuetifyjs/vuetify#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 #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!