Radionappien käsittely Vuesa

Radionappien käsittely tapahtuu vastaavalla tavalla. Katsotaanpa käytännössä. Aluksi luomme ominaisuuden choice, jonka sidomme radio-ryhmään:

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

Luodaan nyt radio-ryhmä:

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

Kirjoitetaan jokaiselle niistä direktiivi v-model ja sidotaan se ominaisuuteen 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>

Annetaan myös jokaiselle oma value-arvonsa:

<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>

Nyt ominaisuudessa choice tulee aina olemaan valitun radio-nappin value-arvo:

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

Kysy käyttäjältä radio-ryhmän avulla, mikä kieli on hänen äidinkielensä. Tee niin, että valittu kieli tulostuu kappaleeseen.

Muokkaa edellistä tehtävää seuraavalla tavalla: olkoon meillä kolme kappaletta tekstiä eri kielellä. Käyttäjän valinnasta riippuen näytä lause valitsemallaan kielellä.