<input v-model="firstName" @update:model-value="updateForm"/>
<input v-model="lastName" @update:model-value="updateForm"/>
The code block above is working as intended, i.e. calling updateForm and syncing firstName/lastName variables. As I understand v-model
uses @update:model-value
internally, so I am basically defining 2 @update:model-value
attributes.
It is working but is it wrong?
I can define different methods: updateFirstName
and updateLastName
, but if method above is working, I don't need to do it, right?
It is wrong, because this is undocumented use that results in unpredictable behaviour. It's known that a separate @update:model-value
listener doesn't replace the one from v-model
, but this can change without notice and it's not determined in which order they are called.
If the intention is to do something on field update, this can be done in a watcher, e.g.:
watch([firstName, lastName], () => { updateForm() });