Práca s radio vo Vue

Práca s radio prebieha podobným spôsobom. Pozrime sa na to v praxi. Na začiatok vytvorme vlastnosť choice, ktorú budeme viazať na skupinu radio:

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

Teraz vytvorme 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íšme direktívu v-model a viažme naň vlastnosť 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>

Dajme tiež každému z nich svoj 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>

Teraz vo vlastnosti choice bude vždy hodnota value označeného radio:

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

Opýtajte sa používateľa pomocou skupiny radio, ktorý jazyk je pre neho materinský. Urobte tak, aby vybraný jazyk bol vypísaný v odseku

Upravte predchádzajúcu úlohu nasledovným spôsobom: nech máme tri odseky s textom v rôznych jazykoch. V závislosti od výberu používateľa vypíšte frázu v zvolenom jazyku.