Delo z radio v Vue

Delo z radio poteka na podoben način. Poglejmo si v praksi. Za začetek ustvarimo lastnost choice, ki jo bomo vezali na skupino radio:

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

Ustvarimo zdaj skupino radio:

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

Vsakemu od njih napišimo direktivo v-model in jo povežimo z lastnostjo 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>

Dajmo tudi vsakemu od njih svojo vrednost 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>

Zdaj bo v lastnosti choice vedno nahajala vrednost value označenega radio:

<template>
	izbrali ste: {{ choice }}
</template>

Vprašajte uporabnika s skupino radio, kateri jezik je zanj materni. Naredite tako, da se izbrani jezik izpiše v odstavku.

Spremenite prejšnjo nalogo na naslednji način: naj imamo tri odstavke z besedilom v različnih jezikih. Glede na izbiro uporabnika izpišite frazo v jeziku, ki ga je izbral.