A radio gombok kezelése Vue-ban

A radio gombok kezelése hasonló módon történik. Nézzük meg a gyakorlatban. Először hozzunk létre egy choice tulajdonságot, amelyet egy radio csoporthoz fogunk kötni:

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

Most készítsünk egy radio csoportot:

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

Írjunk mindegyikre egy v-model direktívát és kössük hozzá a choice tulajdonságot:

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

Adjunk mindegyiknek saját value értéket:

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

Most a choice tulajdonságban mindig a kiválasztott radio value értéke lesz:

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

Kérdezze meg a felhasználótól egy radio csoport segítségével, hogy melyik az anyanyelve. Úgy állítsa be, hogy a kiválasztott nyelv jelenjen meg egy bekezdésben.

Módosítsa az előző feladatot a következő módon: legyen három bekezdésünk szöveggel különböző nyelveken. A felhasználó választásától függően jelenítse meg a kifejezést a általa választott nyelven.