You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Investigate issues printed out by the Vue3 builder about the use of props in v-model.
Context
Since Vue3, it is not possible to rebind props with v-model. Compiler error:
VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
The error is generated from vue/core and there are at the moment 54 occurrences.
Specifically to this codebase, it happens mostly when we define in the markup v-model="value", at the moment 86 occurrences.
E.g.:
Please note:
In Vue2 props bound with v-model are defined as value, while in Vue3 as modelValue
The error is generated exclusively on reassignment, so do not confuse the term "prop mutation" with "object mutation"
Solution
In the current phase, the only solution seems to replace the prop with a computed property. This can be automated and solved by using a mixin that would add prop modelValue and computed value, then remove the prop value (example PR).
Using existing migration script, we would need to remove all the occurrences where we define value as a prop, including mixins and components in .js format.
Description
Investigate issues printed out by the Vue3 builder about the use of props in
v-model
.Context
Since Vue3, it is not possible to rebind props with v-model. Compiler error:
The error is generated from
vue/core
and there are at the moment 54 occurrences.Specifically to this codebase, it happens mostly when we define in the markup
v-model="value"
, at the moment 86 occurrences.E.g.:
Please note:
v-model
are defined asvalue
, while in Vue3 asmodelValue
Solution
In the current phase, the only solution seems to replace the prop with a computed property. This can be automated and solved by using a mixin that would add prop
modelValue
and computedvalue
, then remove the propvalue
(example PR).Using existing migration script, we would need to remove all the occurrences where we define
value
as a prop, including mixins and components in .js format.References
Collaterals
As in Vue3 the
v-model
binding is generating amodelValue
instead ofvalue
, we'll need to apply this mixing everywhere.The text was updated successfully, but these errors were encountered: