Veamos ahora como asociar un control input (checkbox) con el modelo de datos de Vue.
Un checkbox puede estar seleccionado o no. Debemos almacenar en el modelo un valor true o false indicando si queremos que el checkbox esté o no seleccionado.
Mostrar un checkbox no seleccionado. Cuando el operador lo presione hacer visible un botón de confirmación.
<!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="checkbox" v-model="terminos">
Acepto los términos y condiciones
</p>
<button v-if="terminos">Confirmar</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
terminos: false
}
})
</script>
</body>
</html>
Acepto los términos y condiciones
El checkbox está asociado con la propiedad 'terminos' definida en el modelo:
<input type="checkbox" v-model="terminos">
En el modelo iniciamos la propiedad 'terminos' con el valor false:
data:{
terminos: false
}
El botón inicialmente no existe porque por medio de la directiva v-if se verifica con falso, ya que la propiedad 'terminos' tiene dicho valor:
<button v-if="terminos">Confirmar</button>
Una vez que el operador chequea el cuadro de selección la propiedad 'terminos' almacena un true y seguidamente la directiva v-if se verifica verdadera y pasa a mostrarse el botón.
A diferencia de varios radios que actúan en conjunto, los checkbox son independientes unos de otros, es decir que podemos seleccionar varios y no cambia el estado de los otros.
En algunas situaciones nos puede ser conveniente tener almacenado en un arreglo cuales de los checkbox está seleccionado, para esto Vue nos permite asociar varios checkbox a un arreglo.
Disponer 4 checkbox con diferentes lenguajes de programación. Asociar todos los checkbox a un arreglo del modelo y mostrar su contenido en otra parte de la página.
<!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="checkbox" v-model="lenguajes" value="C++">C++</p>
<p><input type="checkbox" v-model="lenguajes" value="C">C</p>
<p><input type="checkbox" v-model="lenguajes" value="C#">C#</p>
<p><input type="checkbox" v-model="lenguajes" value="Java">Java</p>
<p><input type="checkbox" v-model="lenguajes" value="Kotlin">Kotlin</p>
<p><input type="checkbox" v-model="lenguajes" value="Python">Python</p>
<p><input type="checkbox" v-model="lenguajes" value="Ruby">Ruby</p>
<h3>Lenguajes seleccionados</h3>
<ul>
<li v-for="lenguaje in lenguajes">{{lenguaje}}</li>
</ul>
<p>Cantidad de lenguajes que conoce:{{lenguajes.length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
lenguajes: []
}
})
</script>
</body>
</html>
C++
C
C#
Java
Kotlin
Python
Ruby
Cantidad de lenguajes que conoce:{{lenguajes.length}}
Todos los checkbox están asociados al mismo modelo de datos:
<p><input type="checkbox" v-model="lenguajes" value="C++">C++</p> <p><input type="checkbox" v-model="lenguajes" value="C">C</p> <p><input type="checkbox" v-model="lenguajes" value="C#">C#</p> <p><input type="checkbox" v-model="lenguajes" value="Java">Java</p> <p><input type="checkbox" v-model="lenguajes" value="Kotlin">Kotlin</p> <p><input type="checkbox" v-model="lenguajes" value="Python">Python</p> <p><input type="checkbox" v-model="lenguajes" value="Ruby">Ruby</p>
El atributo definido en el modelo se trata de un vector:
var app=new Vue({
el: '#aplicacion',
data:{
lenguajes: []
}
})
Para mostrar todos los lenguajes seleccionados en una lista no ordenada de HTML se hace mediante la directiva v-for iterando el vector:
<ul>
<li v-for="lenguaje in lenguajes">{{lenguaje}}</li>
</ul>
Finalmente para mostrar la cantidad de lenguajes accedemos a la propiedad length del vector 'lenguajes' definido en el modelo:
<p>Cantidad de lenguajes que conoce:{{lenguajes.length}}</p>