[Vuejs]-How to create a radio button group component with vue3 and vuetify

by

1👍

✅

You should set v-model in the parent on the <YesNoRadioButton /> element, then, following the Vue documentation on setting a v-model on a custom component, the child component needs to receive the v-model as a prop. This prop should be bound to the <v-radio-group> (1-way binding, not as v-model), and then the radio-group should emit it’s updated value to the parent which will complete the two-way binding between parent v-model and the radio-group.

Parent.vue

<template>
  <YesNoRadioButton title="Are You Sure?" v-model="userAnswer" />
</template>

<script setup>
  import { ref } from 'vue'
  import YesNoRadioButton from './YesNoRadioButton.vue'

  const userAnswer = ref(true)
</script>

YesNoRadioButton.vue

<template>
  <v-radio-group
    inline
    :label="title"
    :model-value="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <v-radio label="Yes" :value="true"></v-radio>
    <v-radio label="No" :value="false"></v-radio>
  </v-radio-group>
</template>

<script setup>
  defineProps({
    title: String,
    modelValue: Boolean,
  })
  defineEmits(['update:modelValue'])
</script>

Vuetify Playground example

👤yoduh

Leave a comment