I'm trying to create a custom radio ponent in vue js 3, according to the official documentation it can be done using v-model. I tried to apply it, but the first time the ponent is rendered it doesn't check the selected value but the value can be updated when I try to select another value.

I have simulated my code here. =/src/ponents/RadioButton.vue you can see it. Thank You

App.vue

<template>
  <div>
    {{ picked }}
  </div>
  <RadioButton value="One" v-model="picked" />
  <RadioButton value="Two" v-model="picked" />
</template>

<script>
import RadioButton from "./ponents/RadioButton.vue";

export default {
  name: "App",
  ponents: {
    RadioButton,
  },
  data() {
    return {
      picked: "One",
    };
  },
};
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    name="group"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: "RadioButton",
  props: ["modelValue"],
  emits: ["update:modelValue"],
};
</script>

I'm trying to create a custom radio ponent in vue js 3, according to the official documentation it can be done using v-model. I tried to apply it, but the first time the ponent is rendered it doesn't check the selected value but the value can be updated when I try to select another value.

I have simulated my code here. https://codesandbox.io/s/restless-cache-2svtiz?file=/src/ponents/RadioButton.vue you can see it. Thank You

App.vue

<template>
  <div>
    {{ picked }}
  </div>
  <RadioButton value="One" v-model="picked" />
  <RadioButton value="Two" v-model="picked" />
</template>

<script>
import RadioButton from "./ponents/RadioButton.vue";

export default {
  name: "App",
  ponents: {
    RadioButton,
  },
  data() {
    return {
      picked: "One",
    };
  },
};
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    name="group"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: "RadioButton",
  props: ["modelValue"],
  emits: ["update:modelValue"],
};
</script>

• javascript
• vue.js
• radio-button
• vue-ponent
• custom-element

Share Follow edited Jun 22, 2024 at 8:28 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Feb 17, 2022 at 2:39 Saipul ASaipul A 1111 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Here is a working example for Vue3 with position.

App.vue

<div>
  <label for="one">One</label>
  <RadioButton
    id="one"
    v-model="picked"
    name="num"
    value="One"
  />
  <br>
  <label for="two">Two</label>
  <RadioButton
    id="two"
    v-model="picked"
    name="num"
    value="Two"
  />
  <br>
  Picked value: {{ picked }}
</div>

<script setup lang="ts">
import { ref } from 'vue'

const picked = ref('One');
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    :value="value"
    :checked="isChecked"
    @change="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script setup lang="ts">
import { puted, defineProps } from 'vue';

const props = withDefaults(
  defineProps<{
    value?: string
    modelValue?: string
  }>(),
  {
    value: undefined,
    modelValue: '',
  },
);

defineEmits(['update:modelValue']);

const isChecked = puted(() => {
  return props.modelValue === props.value;
});
</script>

In RadioButton.vue, add one props again, like this:

props: {
modelValue: String,
checked: {
  type: Boolean,
  required: false,
  default: false,
}

Dont forget to add :checked="checked" in the input ponent. And finally, in the App.vue, add :checked="true" to the custom ponent that you want to make checked by default.

Inspired by @Sergey Onishchenko's Composition API based solution, I have demonstrated a refined version on StackBlitz:

App.vue

<template>
  <div>
    <RadioButton v-model="picked" name="num" value="One" />
    <RadioButton v-model="picked" name="num" value="Two" />
    Picked value: {{ picked }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const picked = ref('One');
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    :value="value"
    :checked="isChecked"
    @change="changeSelect"
  />
</template>

<script setup lang="ts">
import { puted, defineProps } from 'vue';

interface Props {
  modelValue: string;
  value: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  'update:modelValue': [string];
}>();

function changeSelect() {
  emit('update:modelValue', props.value);
}

const isChecked = puted(() => props.modelValue === props.value);
</script>