Trabajo con radio en Vue
El trabajo con radio
se realiza de manera similar. Veámoslo
en la práctica. Para empezar, creemos una propiedad
choice que vincularemos
a un grupo de radio:
data() {
return {
choice: '',
}
}
Ahora creemos un grupo de radio:
<template>
<input name="radio" type="radio">
<input name="radio" type="radio">
<input name="radio" type="radio">
</template>
Escribamos la directiva v-model en cada uno
y vinculemos la propiedad choice
a ella:
<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>
Démosle también a cada uno su propio 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>
Ahora en la propiedad choice siempre
estará el value del radio marcado:
<template>
you choosed: {{ choice }}
</template>
Pregunte al usuario mediante un grupo de radio
cuál es su lengua materna. Haga que
el idioma seleccionado se muestre en un párrafo.
Modifique la tarea anterior de la siguiente manera: que tengamos tres párrafos con texto en diferentes idiomas. Dependiendo de la elección del usuario, muestre la frase en el idioma que haya seleccionado.