Работа с 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, кой език е неговият роден. Направете така, че избраният език да се изведе в абзац

Модифицирайте предишната задача по следния начин: нека имаме три абзаца с текст на различни езици. В зависимост от избора на потребителя, изведете фразата на езика, който той е избрал.