Vuejs para programadores jQuery.
Form Input Filtro
Continuamos con el código jQuery y Vue. Estos artículos parece que están saliendo cortos. La idea es no apabullar con conceptos pero si consideran que deberían ser dos artículos en cada post dejar el comentario. Gracias
Esta vez hemos variado solo un poco el código para lograr un filtro de contenido básico. La idea es que el texto ingresado en el input solo sea válido cuando tienen más de 4 caracteres y menos de 11.
JQUERY
Enlaces:
Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/jQueryInputFilter.html
GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/jQueryInputFilter.html
El único cambio relevante en jQuery ha sido aumentar las reglas de validación del if de la función actualizar:
if (!exampleInput.val()) { //Anterior
if (!exampleInput.val() || exampleInput.val().length < 5 || exampleInput.val().length > 10) { //Nuevo
VUEJS
Enlaces:
Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/VueJsInputFilter.html
GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/VueJsInputFilter.html
Veamos el cambio en VueJs
this.classInput = this.contenido === '' ? 'is-invalid' : 'is-valid' //Anterior
this.classInput = this.contenido === '' || this.contenido.length < 5 || this.contenido.length > 10 ? 'is-invalid' : 'is-valid' //Nuevo
En Vuejs vemos que hemos ampliado el if ternario con condiciones separadas por OR (||) igual que hicimos en jQuery en el if correspondiente. Usar el if ternario no es indispensable. Si hay dudas con respeto a como funciona se recomienda usar el if de forma normal. Trataremos más sobre if, ternarios e if inútiles en otro post.
Debemos recordar siempre que estamos trabajando con JS y que muchas cosas son de JS nativo (como el caso del if, las condiciones, etc.) y por lo tanto un cambio como este es igual en ambos casos.
Por supuesto que los filtros que existen son bastante más complejos que el que hemos hecho aquí. Prometemos ir agregando cosas más útiles a medida que avancemos.
Antes de abandonar temporalmente los Form Input y pasar a CheckBox y Radio Button repasemos algunos conceptos que hemos obviado hasta ahora:
Enlaces index:
Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/indexInputFilter.html
GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/filtros/indexInputFilter.html
This.
this es un apuntador usado normalmente en los objetos de casi cualquier lenguaje. Apunta a si mismo. El this usado en vue es una característica de los objetos Js para apuntarse a si mismos
¿Por qué se usa el this?
Lo mejor es responder con código. Veamos lo siguiente:
<script>
let name = 'Nombre externo'
new Vue({
el: '#app',
data: {
name: 'Nombre interno'
},
methods: {
mostrar() {
console.log(name) // esto imprimirá el nombre externo
console.log(this.name) //esto imprimirá el nombre interno
}
}
})
</script>
Y como decía antes no es una característica de Vue u otro framework o librería sino que es una característica de Js.
Así que por lo tanto cuando usamos funciones o variables de Vue debemos usar el this. Pero ¿Siempre? En código Js si. Siempre. Veamos que pasa en las variables y funciones que usamos en HTML
Volvemos al primer código y ponemos aquí todo el HTML:
<div class="container" id="app">
<div class="row">
<div class="col-1">
</div>
<div class="col-8">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Vuejs Input Simple</label>
<input type="text" class="form-control" id="exampleInputEmail1" v-model="contenido" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">Lo que ingrese aquí se mostrara debajo</small>
</div>
<div>
<span>{{contenido}}</span>
</div>
</form>
</div>
<div class="col-1">
</div>
</div>
</div>
Vemos dos cosas de Vuejs en el HTML v-model apuntando a una variable y luego mostramos esa misma variable con los paréntesis {{}} pero no usamos el apuntador this. ¿Por qué?
Porque hemos definido el "el: '#app'" en la instancia de Vue y tenemos el id="app" en el elemento padre de este HTML indicando a VueJs que este contenido está controlado por la instancia, por lo que cualquier variable o método será SI o SI parte del objeto Vue.
Al hacer esto NO podemos usar variables de Js que no son parte del objeto instanciado. Esto plantea un problema para cuando queremos usar variables globales, o funciones externas al objeto dentro del HTML.
En realidad eso tiene una fácil solución y es usar un método interno para devolver el resultado del método externo (Lo mismo para las variables). Ya sé. No lo estoy dejando claro así que pasemos a ejemplos:
<div id="app">
<div>{{nombre}}</div>
<div>{{verificaMensaje()}}
</div>
<script>
function verficaMensaje(mensaje) {
return mensaje ? mensaje : 'No hay mensaje'
}
let nombre='Gonzalo'
new Vue({
el: '#app'
})
</script>
No funcionará porque la variable nombre y el método verficaMensaje no existen dentro del objeto Vue. Puesto así la solución es fácil, se escriben dentro y listo, sin embargo cuando es una función externa compleja (quizás ni siquiera nuestra) traer el código a cada instancia es un problema de muchos indoles. La principal es la portabilidad de ese código.
Así que el procedimiento que deberíamos hacer es algo como lo siguiente:
<div id="app">
<div>{{nombre}}</div>
<div>{{verificaMensaje()}}
</div>
<script>
function verficaMensaje(mensaje) {
return mensaje ? mensaje : 'No hay mensaje'
}
let nombre='Gonzalo'
new Vue({
el: '#app',
data: {
nombre: nombre
},
methods: {
verificaMensaje(mensaje) {
return verificaMensaje(mensaje)
}
}
})
</script>
Esto si funciona (ojo, no es indispensable usar los mismos nombre de variables o métodos pero si usar los nombres de métodos o variables que se usaran en el HTML) y veamos un detalle
nombre: nombre -> no tiene el apuntado this (si fuera una variable del objeto a la que se iguala debería ser: nombre: this->nombrevariable ) porque no apunta a una variable interna sino externa al objeto.
verificaMensaje(mensaje) {
return verificaMensaje(mensaje)
}
Aquí sucede lo mismo con el apuntador this en el return, ya que no se devuelve el resultado de un método interno sino de una función externa.
Espero haberlo dejado un poco más claro. Si no es así dejen comentario y volveremos sobre el tema más adelante.
Sobre el tema del this: Documentación oficial.
No hay comentarios:
Publicar un comentario