Arbeid med radio i Vue

Arbeid med radio skjer på en tilsvarende måte. La oss se praksis. Til å begynne med, la oss lage en egenskap choice som vi vil binde til en gruppe radio:

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

La oss nå lage en gruppe radio:

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

La oss skrive direktivet v-model for hver av dem og bind den til egenskapen 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>

La oss også gi hver av dem sin egen 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>

Nå vil value fra den merkede radio alltid ligge i egenskapen choice:

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

Spør brukeren ved hjelp av en gruppe radio hvilket språk som er morsmålet deres. Gjør slik at det valgte språket vises i et avsnitt

Modifiser den forrige oppgaven på følgende måte: la oss si at vi har tre avsnitt med tekst på forskjellige språk. Avhengig av brukerens valg, vis frasen på det valgte språket.