Changing VueJS version 2.4.2->2.5.3 breaks the example app

[sergei-pankratov]

Hi.
There is a breaking change in VueJS between 2.4.2 and 2.5.3 versions, which makes one of tutorial examples broken.
The docs page that has this example is here https://vuejs.org/v2/guide/single-file-components.html
The tutorial example is here: https://codesandbox.io/s/o29j95wx9
If you update VueJS to 2.5.3 version, then when you try to input a value in a textbox it gets replaced with [object InputEvent] and you get
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got InputEvent. found in ---> <BaseInputText> at /components/BaseInputText.vue <TodoList> at /components/TodoList.vue <App> at /App.vue <Root>

[posva]

@chrisvfritz Why was the intention by adding v-on="$listeners" on the BasicInput component?

[chrisvfritz]

@posva It's so that the component can be used just like an input component, without the need for .native. I personally find .native to be an anti-pattern, since it relies on the consumer of the component knowing internal implementation details (i.e. which element is at the root).

[chrisvfritz]

I think this is actually a bug. It seems that the less specific v-on= is now taking priority over v-on:input=.

[posva]

I'm not sure what should be done in this case you could have multiple events, so only taking into account the event of the internal input is not enough. This happens because of v-model extending to an input event. It can also be fixed by using a different event name or by not passing events added by v-model to $listeners but then, I wonder if we should stop passing the bound prop to $prop as well

[chrisvfritz]

I investigated the problem a little more deeply and created an issue to better describe what's happening. Let's continue discussion there, but I'll keep this open until we resolve it one way or another.

[chrisvfritz]

The example code has now been updated to a new pattern we came up with in the above issue. @tehnetaholic Thanks for bringing this to our attention. 🙂