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>
	сіз таңдадыңыз: {{ choice }}
</template>

radio тобының көмегімен пайдаланушыдан оның ана тілі қай тіл екенін сұраңыз. Таңдалған тіл абзацта шығарылатындай етіп жасаңыз.

Алдыңғы тапсырманы келесідей өзгертіңіз: бізде әр түрлі тілдегі мәтіндері бар үш абзац бар болсын. Пайдаланушының таңдауына байланысты таңдалған тілдегі сөйлемді шығарыңыз.