Praca z radio w Vue

Praca z radio odbywa się w podobny sposób. Spójrzmy praktycznie. Na początek utwórzmy właściwość choice, którą będziemy wiązać z grupą radio:

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

Utwórzmy teraz grupę radio:

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

Nadajmy każdemu z nich dyrektywę v-model i powiążmy z nią właściwość 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>

Nadajmy również każdemu z nich własny 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>

Teraz we właściwości choice zawsze będzie znajdować się value zaznaczonego radio:

<template>
	wybrałeś: {{ choice }}
</template>

Zapytaj użytkownika za pomocą grupy radio, jakiego języka jest ojczystego. Spraw, aby wybrany język wyświetlił się w akapicie.

Zmodyfikuj poprzednie zadanie w następujący sposób: niech mamy trzy akapity z tekstem w różnych językach. W zależności od wyboru użytkownika wyświetl frazę w wybranym przez niego języku.