I am migrating from Vue 2 and Vuetify 2 to Vue 3 and Vuetify 3. In my ChildComponent, I am emitting an $event
but it is within a method as shown below. I have attempted to change from @input
to v-model
after following Vue 3 Migration docs but still faced with a bunch of errors and warnings in console.
Vue 2 Code:
// ChildComponent.Vue
<v-text-field>
@input="newField"
</v-text-field>
<script>
export default {
methods: {
newField($event) {
this.$emit('field-change', {
fieldName: this.field.fieldName,
value: $event
})
}
}
}
</script>
// ParentComponent.vue
<ChildComponent
@field-change="handleFieldChange"
/>
With the Vue 3 migration
// ChildComponent.vue
<v-text-field>
v-model="newField"
</v-text-field>
<script>
export default {
methods: {
newField($event) {
this.$emit('field-change', {
fieldName: this.field.fieldName,
value: $event
})
}
}
}
</script>
The warning message that I am getting: [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "function () { [native code] }", got Function
. What am I missing?
According to docs, v-model='newField'
on components expands to :model-value='newField' @update:model-value='newField'
in Vue 3. The error is easy to understand then.
So use prop @update:model-value='newField'
.