Vue3结合Vuetify组件双向绑定失效，父组件值未更新求助

你的问题出在对Vuetify组件的v-model事件处理逻辑上，和原生input标签的事件机制不一样：

1. 事件名称错误：Vuetify的表单组件（比如v-radio-group、v-textarea）遵循Vue标准v-model语法，更新事件固定为@update:model-value，而非你自定义的@update:selectionValue或@update:reasonValue。
2. 事件参数错误：Vuetify组件触发更新事件时，直接传递新的数值（比如单选框的true/false、文本框的输入内容），不是原生DOM事件对象，所以$event.target.value会无法获取正确值甚至报错。

修正后的子组件代码：

MyComponent.vue #

<template>
    <v-radio-group 
        inline 
        :label="title" 
        :model-value="selectionValue"
        @update:model-value="$emit('update:selectionValue', $event)"
    >
        <v-radio label="Yes" :value="true" />
        <v-radio label="No" :value="false" />
    </v-radio-group>
    <div v-if="!selectionValue">
        <v-textarea 
            :label="reasonTitle" 
            :model-value="reasonValue"
            @update:model-value="$emit('update:reasonValue', $event)"
            density="compact" 
            rows="3" 
        />
    </div>
</template>
  
<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps({
    title: String,
    selectionValue: Boolean,
    reasonTitle: String,
    reasonValue: String
})

defineEmits(['update:selectionValue', 'update:reasonValue'])
</script>

修改后，子组件的单选框切换、文本框输入会正确触发父组件的ref更新，双向绑定功能恢复正常。

内容的提问来源于stack exchange，提问作者user3953989