[Vuejs]-Vue3 component not binding

by

1👍

✅

Vuetify components are not guaranteed to emit all the same events as similar native HTML elements. Always check the API documentation.

For both v-radio-group and v-textarea you will want to listen for the update:modelValue event. Because these components can only ever have a single v-model, these event names don’t change based on the "modelValue" name in your parent component. It’s when you re-emit to the parent where the modelValue name matters.

<v-radio-group
  :model-value="selectionValue"
  @update:modelValue="$emit('update:selectionValue', $event)"
>

<v-textarea
  :model-value="reasonValue"
  @update:modelValue="$emit('update:reasonValue', $event)"
/>

Also notice that you need to emit $event, not $event.target.value like you would with a native HTML element. Vuetify is providing the value of the component for you as the entire $event

Vuetify Playground example

👤yoduh

Leave a comment