Lista dinámica con VUEjs, V-FOR, V-BIND

↑ Me gusta (0)

En este video vamos a darle vida al diseño del proyecto Workshop realizado en el video anterior. Con la programación del código Vue necesario para realizar todas las acciones e interacción del usuario con la aplicación. Para empezar con lo interesante lo primero que tenemos que hacer es crear un nuevo archivo javascript dentro de nuestro proyecto con el nombre script.js. Lo siguiente es vincular el html con el nuevo archivo creado, mediante la línea <script src="script.js"></script> y con el archivo Vue en su versión de desarrollo <script src="vue.js"></script>.

Código Vue

Abrimos el archivo script.js y creamos un nuevo objeto Vue, entre llaves digitamos el elemento el al cual le definimos un id, una clase o una etiqueta. Dentro de la llave data colocamos todos los elementos de la lista creada en el html, para que sea llenada de forma dinámica, en este caso definimos el array vacío lists.

No se debe establecer el área de trabajo del código Vue con etiquetas como <html> o <body>, se deben utilizar en elementos normales. Estos mensajes son de mucha ayuda y se los puede obtener únicamente por Vue en su versión de desarrollo.

Con esta recomendación entonces creamos un nuevo div en el html con el id appVue este id lo asignamos el elemento el del objeto Vue ya creado.

Para continuar con el avance del proyecto en este video, configuramos los elementos de la lista lists. Creamos la llave keep con el valor de uno y la llave completed con el valor false esto para decir que la tarea número uno no está completada porque se encuentra en falso. Hacemos una copia y pega de este código, pero cambiamos la llave keep con el valor de dos.

<script>
new Vue({
    el: '#appVue',
    data: {
        lists: [ 
            {keep: ‘uno’, completed: false},
            {keep: ‘dos’, completed: false}
        ],
    }
});
</script>

Con estos elementos creados nos dirigimos a la vista de la aplicación para mostrarlos dinámicamente de la siguiente forma.

Al elemento de la lista le agregamos atributos que permitan vincular ese elemento con el código Vue. Para esto usamos la directiva v-for="item in lists" para recorrer o iterar entre los elementos del array lists y mediante el código {{ item.keep }} mostramos el valor de la llave keep de ese elemento que está siendo conseguido por el bucle, en este caso mostrará los valores de uno y dos.

<ul class="list-group">
    <li class="list-group-item"
        v-for="item in lists" >
            {{ item.keep }}
    </li>
</ul>

Si aumentamos un tercer elemento o más en el array lists del código Vue, se mostrarán sin ningún problema en la lista de tareas del diseño realizado.

Mostrar lo que sucede en Vue

En los videos anteriores cuando se creó el diseño de la aplicación se había definido una tercera columna para mostrar lo que está sucediendo dentro del código Vue, pues para realizar esto simplemento agregamos el código {{ $data | json }} para que se imprima la data en formato Json, con esto actualizamos el navegador y veremos en pantalla los datos de todos los elementos contenidos en la variable data del código Vue.

<div class="col-xs-12">       
    <hr>                     
    <pre>
        {{ $data | json }}
    </pre>
</div>

Configurar una tarea terminada

Para realizar o controlar que una tarea se marque como terminada nos dirigimos de nuevo al elemento de la lista y agregamos la directiva v-bind:class="item.completed == true ? 'disabled' : ''" para colocar el valor de una clase desactivado si el elemento completed que está siendo iterado se encuentra en true.

<ul class="list-group">
    <li class="list-group-item"
        v-for="item in lists" 
        v-bind:class="item.completed == true ? 'disabled' : ''">
            {{ item.keep }}
    </li>
</ul>

Con esto podemos dirigirnos al código Vue, cambiamos los valores completed de los elementos del array lists por true y si refrescamos el navegador veremos como esos elementos se marcan o desactivan de la lista.

Ya podemos hacernos una idea de la magia de Vue, es decir este framework se encarga de hacer muy dinámico el tema de las vistas es como si realmente le damos vida a nuestras aplicaciones.