/ core Public
Inconsistent behaviour between @update:modelValue and @update:model-value #6900
feat: compiler feat: v-on
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Something isn't working
Link to minimal reproduction
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
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
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:modelValuebut 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
@eventproperties are correctly converted to
What is actually happening?
There appears to be a specific replacement happening for
@update:modelValueto convert it to
on:update:modelValuewhich Vue then ignores (it never triggers)
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.
However, when you look at the property names being returned (in App.vue), we see
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:modelValueand works nicely/properly.
Incidentally, I discovered this when I was converting my app to use Webpack preprocessing. Prior to this, I had all my
.vuecomponents 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
The text was updated successfully, but these errors were encountered: