Lavorare con i radio in Vue

Il lavoro con radio avviene in modo analogo. Vediamo in pratica. Per cominciare, creiamo una proprietà choice, che legheremo a un gruppo di radio:

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

Creiamo ora un gruppo di radio:

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

Scriviamo per ciascuno di essi la direttiva v-model e colleghiamola alla proprietà 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>

Diamo inoltre a ciascuno di essi il proprio 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>

Ora nella proprietà choice ci sarà sempre il value del radio selezionato:

<template>
	hai scelto: {{ choice }}
</template>

Chiedi all'utente, utilizzando un gruppo di radio, qual è la sua lingua madre. Fai in modo che la lingua selezionata venga visualizzata in un paragrafo.

Modifica il compito precedente nel seguente modo: supponiamo di avere tre paragrafi con testo in lingue diverse. A seconda della scelta dell'utente, visualizza la frase nella lingua da lui selezionata.