Werken met radio in Vue

Werken met radio verloopt op een vergelijkbare manier. Laten we het in de praktijk bekijken. Laten we eerst een eigenschap choice maken, die we gaan binden aan een groep radio:

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

Laten we nu een groep radio maken:

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

Laten we elke voorzien van de directive v-model en deze binden aan de eigenschap 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>

Laten we ze elk ook een eigen value geven:

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

Nu zal in de eigenschap choice altijd de value van de geselecteerde radio liggen:

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

Vraag de gebruiker met behulp van een groep radio, welke taal zijn moedertaal is. Zorg ervoor dat de geselecteerde taal in een alinea wordt weergegeven.

Pas de vorige opdracht als volgt aan: stel we hebben drie alinea's met tekst in verschillende talen. Afhankelijk van de keuze van de gebruiker, toon de zin in de door hem gekozen taal.