Raadioknuppide töötamine Vue's

Töötamine raadioknuppudega toimub sarnasel viisil. Vaatame seda praktikas. Alustuseks teome omaduse choice, mille seome raadioknuppude grupiga:

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

Teeme nüüd raadioknuppude grupi:

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

Kirjutame igale neist direktiivi v-model ja seome selle omadusega 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>

Anname igale neist ka oma 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>

Nüüd on omaduses choice alati value märgitud raadioknopist:

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

Küsi kasutajalt raadioknuppude grupi abil, mis keel on tema emakeel. Tee nii, et valitud keel kuvatakse lõigus.

Muuda eelmist ülesannet järgmiselt: olgu meil kolm lõigu erineva keelse tekstiga. Sõltuvalt kasutaja valikust kuva fraas valitud keeles.