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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
... computed: { doneTasks: function() { return this.tasks.filter(function(task) { return task.done === true; }); }, undoneTasks: function() { return this.tasks.filter(function(task) { return task.done === false; }); } }, ... |
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:
1 2 |
<link rel="stylesheet" href="https://unpkg.com/vue-nav-tabs/themes/vue-tabs.css"> <script src="https://unpkg.com/vue-nav-tabs/dist/vue-tabs.js"></script> |
Separar listas con los tabs
Ahora una vez definidas las computed properties y añadido el componente, vamos a modificar la vista con esto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="app"> <input type="text" placeholder='New task' v-model='newTask' @keyup.enter='addNewTask'> <vue-tabs> <v-tab title="Undone tasks"> <p v-show='!undoneTasks.length'>No undone tasks!</p> <ul id="list-undone-tasks"> <li v-for="task in undoneTasks"> <input type="checkbox" v-model='task.done'> <span v-bind:class="{'task-done' : task.done}">{{ task.title }}</span> <button v-on:click='removeTask(task)'>x</button> </li> </ul> </v-tab> <v-tab title="Done tasks"> <p v-show='!doneTasks.length'>No done tasks!</p> <ul id="list-done-tasks"> <li v-for="task in doneTasks"> <input type="checkbox" v-model='task.done'> <span v-bind:class="{'task-done' : task.done}">{{ task.title }}</span> <button v-on:click='removeTask(task)'>x</button> </li> </ul> </v-tab> </vue-tabs> </div> |
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