Vue-da radio bilan ishlash

Radio bilan ishlash ham xuddi shunday tarzda amalga oshiriladi. Keling, amaliyotda ko'rib chiqaylik. Boshlanish uchun, biz guruhga bog'laydigan choice xususiyatini yaratamiz radio:

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

Keling, endi radio guruhini yaratamiz:

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

Keling, ularning har biriga v-model direktivasini yozamiz va unga choice xususiyatini bog'laymiz:

<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>

Keling, ularning har biriga o'zining value qiymatini beraylik:

<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>

Endi choice xususiyatida har doim belgilangan radioning value qiymati bo'ladi:

<template>
	Siz tanladingiz: {{ choice }}
</template>

Foydalanuvchidan radio guruhidan foydalanib, qaysi til uning ona tili ekanligini so'rang. Tanlangan til abzatsda chiqarilishi uchun sozlang.

Oldingi vazifani quyidagicha o'zgartiring: farqli tillarda matn bilan uchta abzats bo'lsin. Foydalanuvchi tanloviga qarab, uning tanlagan tilidagi iborani chiqaring.