Vue3中q-radio@update传props值时选中异常、报modelValue缺失如何解决

两个问题直接导致报错和选中失效：

• 报错提到的缺失modelValue，针对的是你自定义组件模板内调用的3个Quasar原生<q-radio>组件，不是你的TravelChoice组件本身。你只给内部q-radio绑定了值更新事件，没有把父组件传入的modelValue prop传递给这些q-radio，q-radio拿不到当前选中值，既无法对比自身val判断选中状态，也会抛出必填参数缺失的错误。
• 父组件存在冗余绑定：v-model="choice"本身就是:model-value="choice" + @update:model-value事件监听的语法糖，额外写:modelValue="choice"属于重复传值，无实际作用。

子组件 TravelChoice.vue #

核心修改是给每个内部<q-radio>绑定传入的modelValue属性：

<template>
  <div class="row content-center justify-around">
    <div>
      <q-radio
        val="walking"
        :model-value="modelValue"
        @update:model-value="emitVal"
      />
      <q-icon name="directions_walk"/>
    </div>
    <div>
      <q-radio
         val="cycling"
         :model-value="modelValue"
         @update:model-value="emitVal"
      />
      <q-icon name="directions_bike"/>
    </div>
    <div>
      <q-radio
         val="driving"
         :model-value="modelValue"
         @update:model-value="emitVal"
      />
      <q-icon name="directions_car" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
  name: "TravelChoice",

  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  methods:{
    emitVal(value){
      this.$emit('update:model-value',value)
    }
  }
})
</script>

父组件 #

移除冗余的modelValue绑定即可：

<template>
  <TravelChoice v-model="choice" />
</template>

<script>
  import { defineComponent, ref } from "vue"
  import TravelChoice from "components/button/TravelChoice.vue"

  export default defineComponent({
    name: "Home",

    components: {
      TravelChoice
    },

    setup() {
      return {
        choice: ref("walking")
      }
    },

    watch: {
      choice(val){
        console.log(val)
      }
    }
  })
</script>

优化提示：同组单选按钮可以直接用Quasar内置的q-option-group组件包裹，无需手动给每个q-radio传值绑定事件，代码会更简洁。

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