cannot retrieve radio button view 3 value

Question

I created a radio button component on which emits an event but my v-model remains empty I do not see where the problem comes from I am no error in the console

import components RadioButton DATA gender: '';

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

component

    <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>

Daniel Daniel · Accepted Answer · 2021-02-17T17:00:19

Looks like a couple things may be mixed up. model seems like is no longer needed in vue v3 according to the migration strategy doc. You can have a look at the docs for v-model here

Looks like

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

should be

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

Here is an example from the docs

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 }
  }
})

note that to be able to use v-model, you need to emit update:modelValue and accept modelValue as a prop

so your code may look something like this now

<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>

cannot retrieve radio button view 3 value

1 Answers