Работа с radio в Vue

Работа с radio происходит аналогичным образом. Давайте посмотрим на практике. Для начала сделаем свойство choice, которое мы будем привязывать к группе radio:

data() {
	return {
		choice: '',
	}
}

Сделаем теперь группу radio:

<template>
	<input name="radio" type="radio">
	<input name="radio" type="radio">
	<input name="radio" type="radio">
</template>

Напишем каждой из них директиву v-model и привяжем к ней свойство choice:

<template>
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
</template>

Дадим также каждой из них свой value:

<template>
	<input name="radio" type="radio" v-model="choice" value="v1">
	<input name="radio" type="radio" v-model="choice" value="v2">
	<input name="radio" type="radio" v-model="choice" value="v3">
</template>

Теперь в свойстве choice всегда будет лежать value отмеченного radio:

<template>
	you choosed: {{ choice }}
</template>

Спросите у пользователя с помощью группы radio, какой язык для него родной. Сделайте так, чтобы выбранный язык вывелся в абзаце

Модифицируйте предыдущую задачу следующим образом: пусть у нас есть три абзаца с текстом на разном языке. В зависимости от выбора пользователя выведите фразу на выбранном им языке.