Vue'da Radio ile Çalışma

Radio ile çalışma benzer şekilde gerçekleşir. Hadi pratikte görelim. Öncelikle, bir grup radio'ya bağlayacağımız choice özelliğini yapalım:

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

Şimdi bir radio grubu yapalım:

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

Her birine v-model direktifini yazalım ve onu choice özelliğine bağlayalım:

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

Ayrıca her birine kendi value değerini verelim:

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

Artık choice özelliğinde her zaman seçili radio'nun value değeri bulunacak:

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

Bir radio grubu kullanarak kullanıcıya ana dilinin hangisi olduğunu sorun. Seçilen dilin bir paragrafta görüntülenmesini sağlayın.

Önceki görevi şu şekilde değiştirin: Farklı dillerde metinler içeren üç paragrafımız olsun. Kullanıcının seçimine bağlı olarak, seçtiği dildeki ifadeyi görüntüleyin.