Lucrul cu radio în Vue

Lucrul cu radio are loc într-un mod similar. Să vedem în practică. Pentru început, să facem proprietatea choice, pe care o vom lega la un grup de radio:

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

Să facem acum un grup de radio:

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

Să scriem fiecăruia directiva v-model și să o legăm de proprietatea 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>

Să dăm de asemenea fiecăruia propriul său 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>

Acum în proprietatea choice va fi întotdeauna valoarea value a elementului radio bifat:

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

Întrebați utilizatorul cu ajutorul unui grup de radio, care limbă este maternă pentru el. Faceți astfel încât limba selectată să apară într-un paragraf.

Modificați sarcina anterioară în felul următor: să avem trei paragrafe cu text în limbi diferite. În dependență de alegerea utilizatorului, afișați fraza în limba aleasă de el.