Vue-ում radio-ի հետ աշխատելը

radio-ի հետ աշխատելը տեղի է ունենում նույն կերպ։ Եկեք գործնականում նայենք։ Սկսելու համար ստեղծենք choice հատկությունը, որը մենք կկապենք radio խմբի հետ։

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

Հիմա ստեղծենք radio խումբ։

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

Յուրաքանչյուրին գրենք v-model դիրեկտիվան և կապենք այն 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>

Յուրաքանչյուրին տանք նաև իր 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>

Հիմա choice հատկության մեջ միշտ կլինի նշված radio-ի value-ն։

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

radio խմբի օգնությամբ հարցրեք օգտատիրոջը, թե որն է նրա համար մայրենի լեզուն։ Ապահովեք, որ ընտրված լեզուն ցուցադրվի պարբերության մեջ։

Փոփոխեք նախորդ առաջադրանքը հետևյալ կերպ. եկեք ունենանք երեք պարբերություններ տարբեր լեզուներով տեքստերով։ Կախված օգտատիրոջ ընտրությունից՝ ցուցադրեք արտահայտությունը նրա ընտրած լեզվով։