vue.jsvuejs3

Can you use @update:model-value with v-model?


<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?


Solution

  • 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() });