Práce s radio ve Vue

Práce s radio probíhá podobným způsobem. Podívejme se na praxi. Pro začátek vytvoříme vlastnost choice, kterou budeme vázat ke skupině radio:

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

Nyní vytvořme skupinu radio:

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

Každému z nich napíšeme direktivu v-model a připojíme k ní vlastnost 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>

Dejme také každému z nich vlastní 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>

Nyní ve vlastnosti choice bude vždy ležet value označeného radio:

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

Zeptejte se uživatele pomocí skupiny radio, jaký jazyk je pro něj rodný. Udělejte to tak, aby vybraný jazyk byl vypsán v odstavci

Upravte předchozí úlohu následujícím způsobem: mějme tři odstavce s textem v různém jazyce. V závislosti na volbě uživatele vypište frázi ve zvoleném jazyce.