Otro control que debemos ver como lo trabaja el framework Vue es el 'select'.
Veamos como procesar un control HTML select de selección única. Lo más conveniente es disponer la primer opción desactiva pidiendo al operador que seleccione su opción.
Mostrar en un control de tipo 'select' los días de la semana. Cuando el operador lo selecciona mostrar cual se seleccionó.
<!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><select v-model="dia">
<option disabled value="">Seleccione un día</option>
<opcion>Lunes</opcion>
<option>Martes</option>
<option>Miércoles</option>
<option>Jueves</option>
<option>Viernes</option>
<option>Sábado</option>
<option>Domingo</option>
</select></p>
<p>Día seleccionado:{{dia}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
dia:''
}
})
</script>
</body>
</html>
Día seleccionado:{{dia}}
Definimos el control 'select' con ocho opciones, la primera que es la seleccionada por defecto aparece desactiva y el valor es un string vacío, asociamos mediante la directiva v-model con la propiedad 'dia':
<p><select v-model="dia">
<option disabled value="">Seleccione un día</option>
<opcion>Lunes</opcion>
<option>Martes</option>
<option>Miércoles</option>
<option>Jueves</option>
<option>Viernes</option>
<option>Sábado</option>
<option>Domingo</option>
</select></p>
En el modelo definimos la propiedad dia:
var app=new Vue({
el: '#aplicacion',
data:{
dia:''
}
})
Cada vez que se cambia el elemento seleccionado, se cambia la propiedad 'dia' y también se actualiza la vista donde imprimimos dicha propiedad:
<p>Día seleccionado:{{dia}}</p>
Un control select de HTML si tiene definida la propiedad 'multiple' luego el operador puede seleccionar varios elementos de la lista. Los valores seleccionados se almacenan en un vector.
Vemos el ejemplo anterior con selecciones múltiples:
<!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><select v-model="dia" multiple>
<opcion>Lunes</opcion>
<option>Martes</option>
<option>Miércoles</option>
<option>Jueves</option>
<option>Viernes</option>
<option>Sábado</option>
<option>Domingo</option>
</select></p>
<p>Día seleccionado:{{dia}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
dia:[]
}
})
</script>
</body>
</html>
Día seleccionado:{{dia}}
El único cambio en la vista es que hemos agregado la propiedad multiple al control 'select':
<p><select v-model="dia" multiple>
También definimos el atributo del modelo como arreglo:
dia: []
Cuando imprimimos el vector dia aparecen todas las componentes que tiene:
<p>Día seleccionado:{{dia}}</p>
Podemos utilizar la directiva v-for para iterar por el arreglo y acceder a cada una como vimos anteriormente.