无法检索单选按钮视图 3 值

Question

我创建了一个单选按钮组件，在该组件上发出一个事件，但我的 v-model 仍然为空 我看不出问题出在哪里我在控制台中没有错误

导入组件 RadioButton 数据性别：'';

 <RadioButton group="gender" val="Mme" label="Mme" :model="gender" />

组件

    <template>
  <div class="radioButton">
    <label :for="`radio${uuid}`">{{ label }}</label>
    <input
      :disabled="disabled"
      :name="group"
      type="radio"
      :id="`radio${uuid}`"
      :value="val"
      :checked="value === val"
      @click="$emit('update:val', $event.target.value)"
    />
  </div>
</template>

<script>
import { uuid } from 'vue-uuid';
export default {
  name: 'RadioButton',
  emits: ['update:val'],
  model: {
    props: 'val',
    event: 'update:val'
  },
  props: {
    val: { type: [String, Number], required: true },
    value: { type: [String, Number], required: true },
    group: { type: String, required: true },
    label: { type: String, required: true },
    disabled: { type: Boolean, default: false },
    variant: { type: String, default: null }
  },
  data() {
    return {
      uuid: uuid.v4()
    };
  }
};
</script>

Answer 1

看起来有几件事可能会混淆。根据migration strategy doc，vue v3 似乎不再需要model。您可以查看v-model here 的文档

看起来像

<RadioButton group="gender" val="Mme" label="Mme" :model="gender" />

应该是

<RadioButton group="gender" val="Mme" label="Mme" v-model="gender" />

这是来自文档的示例

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  template: `
    <input type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

请注意，为了能够使用 v-model，您需要发出 update:modelValue 并接受 modelValue 作为道具

所以你的代码现在可能看起来像这样

<template>
  <div class="radioButton">
    <label :for="`radio${uuid}`">{{ label }}</label>
    <input
      :disabled="disabled"
      :name="group"
      type="radio"
      :id="`radio${uuid}`"
      :value="val"
      :checked="value === val"
      @click="$emit('update:modelValue', val)"
    />
  </div>
</template>

<script>
  import { uuid } from "vue-uuid";
  export default {
    name: "RadioButton",
    emits: ["update:modelValue"],
    props: {
      modelValue: String,
      val: { type: [String, Number], required: true },
      value: { type: [String, Number], required: true },
      group: { type: String, required: true },
      label: { type: String, required: true },
      disabled: { type: Boolean, default: false },
      variant: { type: String, default: null },
    },
    data() {
      return {
        uuid: uuid.v4(),
      };
    },
  };
</script>