რადიო ღილაკებთან მუშაობა Vue-ში

რადიო ღილაკებთან მუშაობა ხდება ანალოგიურად. მოდით პრაქტიკაში ვნახოთ. ჯერ შევქმნათ თვისება choice, რომელსაც დავაკავშირებთ რადიო ღილაკების ჯგუფთან:

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

ახლა შევქმნათ რადიო ღილაკების ჯგუფი:

<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 ყოველთვის იქნება მონიშნული რადიო ღილაკის value:

<template>
	თქვენ აირჩიეთ: {{ choice }}
</template>

რადიო ღილაკების ჯგუფის საშუალებით ჰკითხეთ მომხმარებელს, რომელი ენაა მისთვის მშობლიური. გაუკეთეთ ისე, რომ არჩეული ენა გამოჩნდეს აბზაცში

შეუცვალეთ წინა ამოცანა შემდეგნაირად: გვქონდეს სამი აბზაცი სხვადასხვა ენაზე დაწერილი ტექსტით. მომხმარებლის არჩევანის მიხედვით გამოიტანეთ ფრაზა იმ ენაზე, რომელიც მან აირჩია.