Vue да радио билан ишлаш

Радио билан ишлаш ўхшаш тарзда амалга оширилади. Келинг, амалий жараённи кўриб чиқайлик. Аввалбошда, биз radio гуруҳига боглайдиган choice хусусиятини яратамиз:

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 гуруҳи ёрдамида фойдаланувчидан унинг она тили қайси эканини сўранг. Танланган тил абзацда чиқарилишини таъминланг.

Олдинги вазифани куйидагича ўзгартиринг: бизда турли тиллардаги матнлар билан учта абзац бор бўлсин. Фойдаланувчининг танловига кўра, у танлаган тилдаги иборани чикаринг.