Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent behaviour between @update:modelValue and @update:model-value #6900

Closed
JamShady opened this issue Oct 17, 2022 · 0 comments · Fixed by #6902
Closed

Inconsistent behaviour between @update:modelValue and @update:model-value #6900

JamShady opened this issue Oct 17, 2022 · 0 comments · Fixed by #6902
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler

Comments

@JamShady
Copy link

JamShady commented Oct 17, 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqVVFlr20AQ/iuDCJECtkTSPslOSB9a6EtbaGkfqkJka+Osoz3YXSkJRv+9s7OSfMTuQSDWXN9c3+wmeqd12jYsyqO5XRquHVjmGn1TSC60Mg5+mFJrZuDeKAFxmvWyD4pHp2/s2X2UunGj26jpHUfXDRh2P8F/5dLxlkHXhwQ3gEIulbQIxFldwfXomGy8VZaC5RCT8RN+xxOvbcu68WqrBOsDSeWt3UUh51noDbtCwTGh69IxlADmFW/pA+ADBX4PWJtNAEoJCLoOksZyuYLz2s04tepeNLsuIoedFtH5ys0wk8fZgUThiC+0U6EqVqNiJwfqsxvfP4VlHsR/UZEkBQvJw1Jyih9wCNnWyqHC/3wxStsi6gP3yvqKZiA7tfp5sWZLlz6yF5uMkRfpWnGZxBOIL3AAu4XRotx8u/YBt50uuPQF7eRHY+EKl4V5DwSiVufZuIxoEgWGTEWp07VVEjlJOy96A0Jhsf0UIuSLl4vowTnsIssaqR9X6VKJ7BZtmWmk44JNKyVu36RX6dtLrNy6XX3KrJgujHqyyOc1whOZevAMlS0zU8NkxQwzf0x24LuX8MD2KqnPicPtcAA7t3XkIMNdaD9UvIuK3XPJaMThNIgCeb/KfyM+WPdSe16K0qy4nDqlc7hiYjaSpq/o6D20vKRrGMiYnbwBT4ZBAMiJ/HRnhxcQmOL/bhtdYaknfXECZ6xlEs9pizy0s1AGZ53DpX4Gq2pewQJDZqDLqsIbRgMT2zh/dcNlnbq8faLuPW7/v6ltTzjXrl/VEMUEd2PQexRs8jN+NYz4F4Xsv6lPpVs+HDyoAXQYGbolVFa6hSIgCk3IbQIhG1zfhGvzEKpmaa1Wyd3Yet677RTlI4robBMMXRHdERt8R8mRFoZE6PQ3rtIjGsix95IG1fY5HWnkt7q/te43ozdZAA==

Steps to reproduce

The link provided demonstrates the "broken" behaviour. The (blue) wrapped input element does not have its value bound. Whatever you type in will not update the bound variable.

To fix this, in Wrapper.vue, change the @update:modelValue=... reference to @update:model-value=...

Now the input fields will have the value correctly bound, and you can update the value from the blue text input.

What is expected?

Wrapper.vue is passing back slot properties, one of which is @update:modelValue=...

However, in App.vue, when the slot property keys are dumped out, it can be seen that this is translated for some reason to on:update:modelValue, which appears to be meaningless as it never triggers.

It ought to be converted to onUpdate:modelValue but there appears to be some kind of specific conversion going on that only affects this string. The proof being that we can circumvent it by replacing it with @update:model-value=... which correctly gets converted to onUpdate:modelValue, and gets bound/registered/activated properly

All other @event properties are correctly converted to onEvent equivalents (i.e. @click converts to onClick etc)

What is actually happening?

There appears to be a specific replacement happening for @update:modelValue to convert it to on:update:modelValue which Vue then ignores (it never triggers)

System Info

No response

Any additional comments?

I am attempting to render some input element via a wrapper. The wrapper accepts a field and various other parameters, and generates lovely HTML for display, as well as providing v-slot properties back so they can be passed into the input component itself (which is passed in as a slot).

Part of the slot props being passed back is workaround for implementing v-model, i.e. :modelValue=... and @update:modelValue=...

However, when you look at the property names being returned (in App.vue), we see on:update:modelValue instead of onUpdate:modelValue, and also the update event never gets caught.

When this is changed in Wrapper.vue to @update:model-value, it's correctly passed back as onUpdate:modelValue and works nicely/properly.

Incidentally, I discovered this when I was converting my app to use Webpack preprocessing. Prior to this, I had all my .vue components accessible in a public directly and imported on-the-fly via this library: https://github.com/FranckFreiburger/vue3-sfc-loader, i.e. so the browser would directly request, transpile and import each component individually. This code worked perfectly with that. It's only in preprocessing via Webpack and/or Vite (and SFC playground) that this issue comes up

@LinusBorg LinusBorg added the 🐞 bug Something isn't working label Oct 17, 2022
@posva posva added feat: v-on scope: compiler 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Oct 18, 2022
chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler
Projects
None yet
3 participants