Vue-də radio ilə iş

Radio ilə iş eyni qaydada aparılır. Gəlin praktikada baxaq. Əvvəlcə qrupa radio ilə bağlayacağımız choice xassəsini yaradaq:

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

İndi isə radio qrupu yaradaq:

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

Gəlin hər birinə v-model direktivini yazaq və onu choice xassəsi ilə bağlayaq:

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

Gəlin hər birinə öz value dəyərini verək:

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

İndi choice xassəsində həmişə seçilmiş radio-nun value dəyəri olacaq:

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

İstifadəçidən radio qrupu vasitəsilə soruşun ki, onun üçün hansı dili ana dilidir. Seçilmiş dilin abzasda çıxmasını təmin edin.

Əvvəlki məsələni aşağıdakı kimi dəyişin: Fərqli dillərdə mətn olan üç abzasımız var. İstifadəçinin seçimindən asılı olaraq, onun seçdiyi dildə ifadəni çıxarın.