Renderización de listas VUEjs

En este video enseño a trabajar las listas en #VUE. Listamos elementos, agregamos de forma dinámica, y damos las bases necesarias para abordar con éxito esta tecnología.

 

Inicia sesión para poder registrar las lecciones que has completado Login

Comparte en

Aprenderemos sobre la directiva v-for de Vue.js, ella nos permite iterar de forma dinámica un array de datos y mostrarlos de forma reactiva. Listar los elementos es una practica para apreciar el poder de VUE, podremos agregar y manipular la lista... Te darás cuenta de que VUEjs trabaja con el dato y en base a ellos manipula los elementos visuales.

Así trabajamos en HTML

<div id="main">
    <ul>
        <li v-for="item in people" v-text="item"></li>
    </ul>
    <input type="text" v-model="name" v-on:keyup.enter="addName">
</div>

Este es el módulo creado en VUEjs

<script>
    new Vue({
        el: '#main',
        data: {
            people: ['Lynda', 'Isabella', 'Diana', 'Luisa']
        },
        name: '',
        methods: {
            addName: function(){
                this.people.push(this.name);
                this.name = '';
            }
        }
    });
</script>

Comparte en

Creado por: Venezuela Italo Morales

CEO & Founder de Rimorsoft Online

Más información


Actualizar registros con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario para realmente actualizar en la base de datos utilizando la tecnología de Laravel y Vue.

Formulario para Editar con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva ventana flotante con la función edit para preparar los datos en Vue.

Guardar datos con LARAVEL y VUEjs – Método STORE

Laravel VUE.js VUE.js 2 0 comentarios

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para hacer el al llamado al método store() del API creada en Laravel.

Formulario de creación con ventana Modal - Laravel y Vuejs

Laravel VUE.js VUE.js 2 0 comentarios

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una ventana Modal que aparece al hacer clic en el botón para crear una nueva tarea.