TypeScript / Vue – props computados, condicionales y bucles

Bienvenidos sean a este post, hoy veremos tres temas interesantes.

En el dia de hoy veremos tres temas que se manejan en cualquier codigo. El primero sera para establecer propiedades denominadas como computados, los cuales son valores de solo lectura pero que nos permiten manejar cierta logica. Los condicionales tambien lo podemos aplicar a las propiedades y asi como tambien un bucle, como en cualquier lenguaje. Para entender este concepto vamos a trabajarlo con un proyecto que crearemos con el siguiente comando:

$ vue create ejemplo05

Si vienen de posts anteriores, muy probablemente tengan creado el perfil para cargar las opciones de nuestro proyecto pero sino lo poseen les dejo las opciones que deben seleccionar:

1. typescript (solamente)
2. 3.x
3. Use class-style component syntax? yes
4. Use babel alongside? no
5. dedicated config files
6. Save this as a preset for future projects? yes

Con nuestro proyecto creado nuestro primer paso sera ingresar al directorio con el nombre del mismo, Nuestro primer paso sera crear un archivo con el nombre de Texto.vue en el directorio src y le agregaremos el siguiente codigo:

<template>
        <p>{{ titulo }}</p>
        <input type="text" v-model="miTexto" />
        <div v-if="largoTexto > 0">
          <p>El largo del texto es: {{ largoTexto }}</p>
          <ul>Las palabras son:
                <li v-for="palabra in palabras">{{ palabra }}</li>
          </ul>
        </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
        props: {
          titulo: String,
          msj: String
        },
        computed: {
          largoTexto() {
                return this.miTexto.length;
          },
          palabras() {
                return this.miTexto.split(' ');
          }
        }
})
export default class Texto extends Vue {
        titulo!: string;
        msj!: string;
        miTexto!: string;
        data() {
          return {
                miTexto: this.msj
          }
        }
}
</script>
<style scoped></style>

Hablemos sobre las tres partes. En el template tendremos un input para ingresar un texto, donde la propiedad v-model es la encargada de enlazar este elemento html con el codigo de script. Despues tenemos un div y en este tendremos al condicional, v-if, donde tiene un valor que es la condicion a evaluar. En este caso, verifica que largoTexto sea mayor a 0. Si se cumple esta condicion, mostrara al div de lo contrario lo oculta. Dentro de este div tendremos un parrafo indicando el valor de largoTexto. Luego un listado donde usaremos el bucle. Este es habilitado mediante v-for, y en el valor pasamos como recuperaremos la informacion. Aqui usamos la sintaxis como si fuera un for generico, donde la primera variable sera la encargada de almacenar el valor de cada elemento en cada pasada y la segunda es el array de donde se sacaran los valores. Y en cada item de la lista mostraremos el valor recuperado. Con esto comentado podemos pasar a la segunda parte encargada del script.

Aqui importaremos dos clases para habilitar al decorador, Options, y para crear al componente en si, Vue. Lo siguiente es definir al decorador, en este iniciaremos primero a props, la cual tendra dos propiedades que seran para el titulo que mostramos en el template, el primer parrafo, y luego una que podemos usar para iniciar el valor en miTexto. Despues, tenemos a computed. Estas son las propiedades computadas, y aqui definiremos dos metodos. El primero es largoTexto y este devuelve el resultado de aplicar length al valor de mitTexto. El segundo es palabras, y este devuelve el resultado de aplicar un split a miTexto y para ello le dijimos que utilice un espacio en blanco. Estas son los dos metodos que usamos en template para trabajar con el condicional y el bucle. Luego tenemos la clase que exportaremos y sera el componente de vue. En este usaremos al operador de asignacion definitiva para las propiedades que usaremos, esto es asi para poder enviar null o undefined a estas propiedades, y mediante data estableceremos el valor inicial de miTexto. Ya tenemos nuestro componente hijo creado, lo siguiente es ir a App.vue en src y modificar el codigo de la siguiente manera:

<template>
        <Texto titulo="Ingrese un texto" msj=""/>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import Texto from './Texto.vue';

@Options({
  components: {
    Texto,
  },
})
export default class App extends Vue {}
</script>

<style scoped></style>

Este implementa al componente creado anteriormente. Pasaremos las dos propiedades, titulo y msj, donde una tendra un valor y la otra no. En el script simplemente importamos a nuestro componente del archivo anterior, para finalmente decorarla mediante el Options y la incluiremos como un componente para que pueda ser utilizada. Si lo compilan y prueban, trabajara como se ve en el siguiente video:

Observen como al inicio no tenemos ningun dato debajo del input pero a medida que vamos escribiendo, no solo va apareciendo el tamaño del texto sino que se van enlistando las distintas palabras. Todo gracias al condicional y al bucle que van actualizando constantemente. Antes de finalizar les dejo un link para descargar todos los archivos del proyecto:

En resumen, hoy hemos visto tres elementos como son, las propiedades computadas, el condicional, y el bucle for, una breve descripcion de cada uno, como se aplican y un ejemplo practico para verlos en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.