Как сделать компонент радио-кнопок на Vue?

Question

[Niki4h]

Здравствуйте. Увидел у Vuetify пример работы с радио-кнопками:

<template>
  <v-container
    class="px-0"
    fluid
  >
    <v-radio-group v-model="radioGroup">
      <v-radio
        v-for="n in 3"
        :key="n"
        :label="`Radio ${n}`"
        :value="n"
      ></v-radio>
    </v-radio-group>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        radioGroup: 1,
      }
    },
  }
</script>

То есть компонент v-radio-group как-то отслеживает v-radio внутри и возвращает выбранный вариант. Собственно, вот и появился вопрос как сделать такое же поведение, вместо нескольких v-radio с v-model на одну переменную?

Answer 1

[0xD34F]

Vue 2, options API

Компонент радиогруппы:

props: [ 'value' ],
provide() {
  return {
    radioGroup: this,
  };
},

Компонент радиокнопки:

props: [ 'value' ],
inject: [ 'radioGroup' ],

<input
  type="radio"
  :value="value"
  :checked="radioGroup.value === value"
  @change="radioGroup.$emit('input', value)"
>

https://jsfiddle.net/d7aow8fq/

Vue 3, composition API

Компонент радиогруппы:

props: [ 'modelValue' ],
emits: [ 'update:modelValue' ],
setup(props, { emit }) {
  provide('radioGroupValue', computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
  }));
},

Компонент радиокнопки:

props: [ 'value' ],
setup() {
  return {
    radioGroupValue: inject('radioGroupValue'),
  };
},

<input
  type="radio"
  :value="value"
  v-model="radioGroupValue"
>

https://jsfiddle.net/d7aow8fq/2/

Comments

[Niki4h]

Огромное спасибо!

[Niki4h]

А возможно это реализовать на composition api? У меня в основном все компоненты именно на нем. Доступа к this нет, есть только context.attrs, а он не реактивный.

[0xD34F]

Niki4h, дополнил ответ.

[Niki4h]

0xD34F, Еще раз спасибо!