Trabalhando com radio no Vue

Trabalhar com radio ocorre de maneira análoga. Vamos ver na prática. Para começar, vamos fazer uma propriedade choice, que vamos vincular a um grupo de radio:

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

Vamos fazer agora um grupo de radio:

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

Vamos escrever para cada um deles a diretiva v-model e vincular a eles a propriedade 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>

Vamos dar também a cada um deles seu próprio 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>

Agora na propriedade choice sempre estarará o value do radio marcado:

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

Pergunte ao usuário usando um grupo de radio qual idioma é o nativo para ele. Faça com que o idioma selecionado seja exibido em um parágrafo.

Modifique a tarefa anterior da seguinte maneira: vamos ter três parágrafos com texto em idiomas diferentes. Dependendo da escolha do usuário, exiba a frase no idioma por ele escolhido.