Vue.js 2 #3 : Computed Properties

Hoy vamos a utilizar las computed properties para crear dos listas de tareas separadas. Una lista que contendrá las tareas hechas y otra lista las que no están hechas.

Las computed properties nos permiten crear nuevas propiedades reactivas que dependen de otras propiedades del objeto data y que pueden tener una lógica «complicada» (filtros, concatenaciones, etc., etc.).

Nosotros vamos a utilizar las computed properties para crear dos listas de tareas, una de las tareas hechas y otra con las tareas no hechas.

 

Crear computed properties

Partimos del ejemplo del anterior post, primero de todo vamos a crear las computed properties en la instancia de Vue.js:

Hemos creado dos propiedades:

  • doneTasks: esta propiedad recorre todas las tareas del array tasks y se queda con las tareas que están hechas ( task.done === true )
  • undoneTasks: hace lo mismo que la anterior, pero se queda con las que no están hechas ( task.done === false)

Una vez hecho esto, ya podremos acceder a estas propiedades desde la vista como si fuese una propiedad definida en el objeto data. Serán propiedades reactivas, es decir, los valores de las propiedades nuevas (doneTasks y undoneTasks) irán cambiando conforme nosotros vayamos haciendo cosas en la app.

 

Añadir componente tab

Para que quede más atractivo, vamos añadir un componente creado por un usuario de la comunidad. Lo que son los componentes lo veremos en la siguiente entrada y veremos como se crean, pero he visto interesante agregar ésto ahora. Este componente lo que nos permite es crear un menú de tabs fácilmente. Vamos a añadir los CSS y JS necesarios:

 

Separar listas con los tabs

Ahora una vez definidas las computed properties y añadido el componente, vamos a modificar la vista con esto:

Si te fijas estamos utilizando el componente vue-tabs y dentro tiene dos v-tab, que son los dos tabs que tenemos, que corresponden a las dos listas. Con el atributo title en v-tab le indicamos el título que se mostrará en el tab.

También, estamos utilizando las computed properties definidas anteriormente, en vez del array tasks. Ya que, como he dicho antes, lo que queremos es que en cada lista (hechas y no hechas) se muestren las tareas que queremos y no todas las tareas sin distinción.

See the Pen Vue.js 2 #3 by vreaxe (@vreaxe) on CodePen.

 

-

– https://vuejs.org/v2/guide/computed.html

– http://optimizely.github.io/vuejs.org/guide/computed.html

– https://cristijora.github.io/vue-tabs/#/

– https://www.w3schools.com/jsref/jsref_filter.asp


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

? CONTACTAR

Deja una respuesta

  Acepto la política de privacidad