Vuejs para programadores jQuery.
CheckBox y RadioButton V
En este post trataremos los CheckBox y los RadioButton para saber como se controlan en Vuejs.
JQUERY - CHECKBOX
Enlaces:
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/jQueryCheckBox.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/jQueryCheckBox.html
Primero los CheckBox y empezamos por el HTML:
la parte relevante está en el Form:
<form>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1">
<label class="custom-control-label" for="customControlValidation1">Haga click en el check box</label>
</div>
<div>
<span id="contenido"></span>
</div>
</form>
Tenemos un form input type checkbox y un espacio con un id "contenido" para mostrar el estado actual del checkbox. Un checkbox solo permite dos estados: check y uncheck. Veamos como lo resolvemos en jQuery:
<script>
const checkbox = jQuery('#customControlValidation1')
checkbox.on('click', actualiza )
actualiza()
function actualiza() {
jQuery('#contenido').empty().append(checkbox.prop('checked') ? 'Chequeado' : 'Sin chequear')
}
</script>
Primero el const para la relación de una constante con el objeto HTML del checkbox. Luego asociamos la función al evento click y por último lanzamos la actualización por primera vez antes de los eventos para que muestre el primero resultado.
La función actualiza:
function actualiza() {
jQuery('#contenido').empty().append(checkbox.prop('checked') ? 'Chequeado' : 'Sin chequear')
}
Con jQuery referimos al id "contenido", lo vaciamos con empty() y luego agregamos un nuevo contenido. Revisemos que contenido es:
checkbox.prop('checked') ? 'Chequeado' : 'Sin chequear'
Comprobamos en el objeto asignado a la constante que el estado sea checked. Si es así devuelve el mensaje 'Chequeado' y si no es así devuelve el mensaje: 'Sin chequear'
Nunca mi código es imposición. Solo resuelvo los problemas según mi propia psiquis, si ven soluciones que se adecuen más a su forma de pensar no duden en usarlas.
VUEJS - CHECKBOX
Enlaces:
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/VueJsCheckBox.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/VueJsCheckBox.html
Veamos como hacemos esto mismo en Vuejs, primero el HTML
<form>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" v-model="chequeado">
<label class="custom-control-label" for="customControlValidation1">Haga click en el check box</label>
</div>
<div>
<span>
{{chequeado ? 'Está chequeado' : 'No se ha chequeado'}}
</span>
</div>
</form>
Vemos en el input otra vez el uso el v-model. Hablemos de ello un momento. v-model es una manera de asignar una variable a los controladores pero no define el tipo de variable, lo define el elemento sobre el que lo estamos usando. Así en los ejemplos anteriores v-model apuntaba a una variable de cadena de caracteres pero en este caso se espera una variable Boolean (o sea de dos estados posible: TRUE o FALSE).
El siguiente cambio es esperado:
{{chequeado ? 'Está chequeado' : 'No se ha chequeado'}}
Se comprueba la variable, si es TRUE muestra 'Está chequeado' y si es FALSE muestra 'No se ha chequeado'
El código JS es básico:
new Vue({
el: '#app',
data: {
chequeado: false
}
})
</script>
Solo se ha creado la variable y asignado un valor inicial que será el estado inicial del checkbox. Una vez más insistimos en que no es necesario estar actualizando el valor ya que al cambiar el v-model la variable se actualizara y también el contenido mostrado.
Index - CheckBox
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/indexCheckBox.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/checkbox/indexCheckBox.html
JQUERY- RADIOBUTTON
Enlaces:
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/jQueryRadioButton.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/jQueryRadioButton.html
Pasemos ahora a revisar lo que hemos creado de RadioButton:
El HTML:
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" value="primero" id="customControlValidation2" name="radio-stacked" checked>
<label class="custom-control-label" for="customControlValidation2">Esta es la primer opcion</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" value="segundo">
<label class="custom-control-label" for="customControlValidation3">Esta es la segunda opcion</label>
</div>
<div>
<span id="contenido"></span>
</div>
</form>
Más o menos estamos manteniendo la lógica. En este caso los RadioButtons pide un mínimo de dos controles. jQuery usa la lógica del HTML para identificar los RadioButtons relacionados aprovechando que usan el mismo atributo name.
<script>
const radioButton = jQuery('input:radio[name=radio-stacked]')
radioButton.on('input', actualiza )
actualiza()
function actualiza() {
jQuery('#contenido').empty().append(jQuery('input:radio[name=radio-stacked]:checked').val())
}
</script>
Realmente el código es muy sencillo. Y solo cambia del caso anterior en el contenido del append:
jQuery('input:radio[name=radio-stacked]:checked').val()
Simplemente recogemos el val() (value) del RadioButtons que tenga check en ese momento. El elegido por defecto está marcado en el HTML con el atributo checked y de los RadioButtons siempre se espera que halla uno chequeado.
Se ha puesto en el value de los elementos HTML el mensaje que mostramos en el elemento con id "contenido"
VUEJS - RADIOBUTTON
Enlaces:
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/VueJsRadioButton.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/VueJsRadioButton.html
Pasemos a Vuejs observando el HTML:
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" value="primero" id="customControlValidation2" name="radio-stacked" v-model="checkValue">
<label class="custom-control-label" for="customControlValidation2">Esta es la primer opcion</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" value="segundo" v-model="checkValue">
<label class="custom-control-label" for="customControlValidation3">Esta es la segunda</label>
</div>
<div>
<span>{{checkValue}}</span>
</div>
</form>
Hemos eliminado el atributo checked porque el elegido lo definirá el valor por defecto de la variable asociada con v-model. Es este caso relacionamos los RadioButtons usando la misma variable para v-model en ambos elemento y repetimos la operación de mostrar el contenido de dicha variable para saber cual ha sido elegida.
Y el JS es igual que en el caso anterior:
<script>
new Vue({
el: '#app',
data: {
checkValue: 'primero'
}
})
</script>
Se le asigna a la variable que se usara el valor (value) del elemento que queremos que se marque por defecto.
Hasta ahora estamos yendo despacio y mirando caso a caso para poder alejar dudas específicas. En el próximo post trabajaremos con botones y crearemos una lógica que nos permita configurar un botón a través de CheckBox y RadioButtons combinados.
La idea es un poco ir de menos a más. Una vez entendamos las bases de funcionamiento de diferentes controladores iremos combinando para poder lograr cosas más complejas.
Esperamos tener feedback como para saber si este material está siendo útil, si hay que cambiar la hoja de ruta, si el ritmo es el adecuado, etc.
Código.
- Codesandbox: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/indexRadioButton.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/ControlSimple/radiobutton/indexRadioButton.html
También recordar que esto es un acercamiento para entender la lógica de Vue desde el punto de vista de jQuery pero para aprender realmente como funciona Vuejs, como realizar proyectos completos o aprender más de su ecosistema te recomiendo visitar: escuelavue.es (no, no es mío y no, no es publicidad) gratuito y con muy buen contenido creado por Juan Andrés Núñez.
O los artículos de Desire en: https://desiremcarmona.com/#/guides
Consultas, dudas, comentarios: Slack de PEUM o en Twitter.
