Veremos como administrar en Vue un conjunto de controles input (radio) para identificar la opción seleccionada.
Para trabajar un conjunto de controles radio debemos definir en el modelo de datos una única propiedad que almacenará el valor de la seleccionada.
Es importante decir que debemos fijar en el modelo cual es la que se encuentra seleccionada inicialmente, no rescata los valores iniciales definidos en un control como podría ser:
<input checked type="radio" value="universitarios" v-model="estudios" id="universitarios">Luego deberíamos iniciar el modelo:
estudios: 'universitarios'
Crear cuatro controles de tipo radio que permitan seleccionar que tipo de estudios tiene el visitante. Mostrar en la parte inferior cual se encuentra actualmente seleccionado a partir de los datos del modelo.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<p>
<input type="radio" value="Sin estudios" v-model="estudios" id="sinestudios">
<label for="sinestudios">Sin estudios</label>
</p>
<p>
<input type="radio" value="Primarios" v-model="estudios" id="primarios">
<label for="primarios">Primarios</label>
</p>
<p>
<input type="radio" value="Secundarios" v-model="estudios" id="secundarios">
<label for="secundarios">Secundarios</label>
</p>
<p>
<input checked type="radio" value="universitarios" v-model="estudios" id="universitarios">
<label for="universitarios">Universitarios</label>
</p>
<p>Sus estudios son:{{estudios}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
estudios: 'Sin estudios'
}
})
</script>
</body>
</html>
Sus estudios son:{{estudios}}
Todos los controles radio están asociados a la misma propiedad estudios definida en el modelo de Vue:
<input type="radio" value="Sin estudios" v-model="estudios" id="sinestudios">
<input type="radio" value="Primarios" v-model="estudios" id="primarios">
<input type="radio" value="Secundarios" v-model="estudios" id="secundarios">
<input checked type="radio" value="universitarios" v-model="estudios" id="universitarios">
El primer radio es el que aparece seleccionado por defecto debido a que en el modelo lo inicializamos con el value del primer radio:
<script>
var app=new Vue({
el: '#aplicacion',
data:{
estudios: 'Sin estudios'
}
})
</script>