Puna me radio në Vue

Puna me radio ndodh në mënyrë të ngjashme. Le të shohim në praktikë. Për fillim le të krijojmë një property choice, të cilin do ta lidhim me një grup radio:

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

Tani le të krijojmë një grup radio:

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

Le t'i shkruajmë secilit prej tyre direktivën v-model dhe ta lidhim atë me property-n 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>

Le t'u japim gjithashtu secilit prej tyre value-in e vet:

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

Tani në property-n choice do të ketë gjithmonë value nga radio i zgjedhur:

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

Pyetni përdoruesin me një grup radio, cila gjuhë është amtare për të. Bëni që gjuha e zgjedhur të shfaqet në një paragraf

Modifikoni detyrën e mëparshme në mënyrën vijuese: le të themi se kemi tre paragrafe me tekst në gjuhë të ndryshme. Në varësi të zgjedhjes së përdoruesit shfaqni frazën në gjuhën që ai ka zgjedhur.