Working with radio in Vue

Working with radio is similar. Let's see in practice. First, let's create a property choice, which we will bind to the group radio:

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

Let's now make a group radio:

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

Let's write a v-model directive for each of them and bind the choice property to it:

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

Let's also give each of them its own 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>

Now the choice property will always contain value of the marked radio:

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

Ask the user via the radio group what language they are native to. Make the selected language appear in a paragraph

Modify the previous task as follows: let's say we have three paragraphs with text in different languages. Depending on the user's choice, output a phrase in the language he/she has chosen.