VueJS ejemplo de CRUD sencillo | Programador Web Valencia

VueJS ejemplo de CRUD sencillo

4 minutos

VueJS

VueJS es una herramienta fantástica para un rápido desarrollo. Te permite ahorrar mucho tiempo gracias a su magnífico renderizado de HTML. Una evolución natural de AngularJS, pero simplificando y mejorado. Todo un acierto para ir sustituyendo paulatinamente otras bibliotecas como JQuery.

A continuación dejo, totalmente comentado, un ejemplo de como realizar un CRUD (Crear datos, Leerlos, Actualizarlos y Borrarlos). En este caso se gestiona la información de pacientes, donde se tiene el nombre y edad. Además, de forma automática, se genera un identificador único.

DEMO

Rellena los campos y pulsa Enter o el botón Añadir.

Pacientes
id Nombre Edad
{{ paciente.id }} {{ paciente.nombre }} {{ paciente.edad }}

HTML

<div id="appPacientes" class="container">
        <!-- Formulario para añadir pacientes -->
        <section class="form">
            <form action="" class="text-center">
                <input v-model="nombre" @keyup.enter="crearPaciente" type="text" class="form-control" placeholder="Nombre">
                <input v-model="edad" @keyup.enter="crearPaciente" type="number" name="edad" placeholder="Edad" class="form-control">
                <!-- Botón para añadir -->
                <input @click="crearPaciente" type="button" value="Añadir" class="btn btn-success">
            </form>
        </section>
        <!-- Tabla donde se muestran los datos -->
        <section class="data">
            <caption>Pacientes</caption>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">id</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Edad</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(paciente, index) in pacientes">
                        <td>{{ paciente.id }}</td>
                        <td>
                            <span v-if="formActualizar && idActualizar == index">
                                <!-- Formulario para actualizar -->
                                <input v-model="nombreActualizar" type="text" class="form-control">
                            </span>
                            <span v-else>
                                <!-- Dato nombre -->
                                {{ paciente.nombre }}
                            </span>
                        </td>
                        <td>
                            <span v-if="formActualizar && idActualizar == index">
                                <!-- Formulario para actualizar -->
                                <input v-model="edadActualizar" type="text" class="form-control">
                            </span>
                            <span v-else>
                                <!-- Dato edad -->
                                {{ paciente.edad }}
                            </span>
                        </td>
                        <td>
                            <!-- Botón para guardar la información actualizada -->
                            <span v-if="formActualizar && idActualizar == index">
                                <button @click="guardarActualizacion(index)" class="btn btn-success">Guardar</button>
                            </span>
                            <span v-else>
                                <!-- Botón para mostrar el formulario de actualizar -->
                                <button @click="verFormActualizar(index)" class="btn btn-warning">Actualizar</button>
                                <!-- Botón para borrar -->
                                <button @click="borrarPaciente(index)" class="btn btn-danger">Borrar</button>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

VueJS

document.addEventListener('DOMContentLoaded', function () {
    new Vue({
        el: '#appPacientes',
        data: {
            // Input nombre
            nombre: '',
            // Input edad
            edad: '',
            // Ver o no ver el formulario de actualizar
            formActualizar: false,
            // La posición de tu lista donde te gustaría actualizar
            idActualizar: -1,
            // Input nombre dentro del formulario de actualizar
            nombreActualizar: '',
            // Input edad dentro del formulario de actualizar
            edadActualizar: '',
            // Lista de pacientes
            pacientes: []
        },
        methods: {
            crearPaciente: function () {
                // Anyadimos a nuestra lista
                this.pacientes.push({
                    id: + new Date(),
                    nombre: this.nombre,
                    edad: this.edad
                });
                // Vaciamos el formulario de añadir
                this.nombre = '';
                this.edad = '';
            },
            verFormActualizar: function (paciente_id) {
                // Antes de mostrar el formulario de actualizar, rellenamos sus campos
                this.idActualizar = paciente_id;
                this.nombreActualizar = this.pacientes[paciente_id].nombre;
                this.edadActualizar = this.pacientes[paciente_id].edad;
                // Mostramos el formulario
                this.formActualizar = true;
            },
            borrarPaciente: function (paciente_id) {
                // Borramos de la lista
                this.pacientes.splice(paciente_id, 1);
            },
            guardarActualizacion: function (paciente_id) {
                // Ocultamos nuestro formulario de actualizar
                this.formActualizar = false;
                // Actualizamos los datos
                this.pacientes[paciente_id].nombre = this.nombreActualizar;
                this.pacientes[paciente_id].edad = this.edadActualizar;
            }
        }
    });
});

Completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pacientes</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="appPacientes" class="container">
        <!-- Formulario para añadir pacientes -->
        <section class="form">
            <form action="" class="text-center">
                <input v-model="nombre" @keyup.enter="crearPaciente" type="text" class="form-control" placeholder="Nombre">
                <input v-model="edad" @keyup.enter="crearPaciente" type="number" name="edad" placeholder="Edad" class="form-control">
                <!-- Botón para añadir -->
                <input @click="crearPaciente" type="button" value="Añadir" class="btn btn-success">
            </form>
        </section>
        <!-- Tabla donde se muestran los datos -->
        <section class="data">
            <caption>Pacientes</caption>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">id</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Edad</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(paciente, index) in pacientes">
                        <td>{{ paciente.id }}</td>
                        <td>
                            <span v-if="formActualizar && idActualizar == index">
                                <!-- Formulario para actualizar -->
                                <input v-model="nombreActualizar" type="text" class="form-control">
                            </span>
                            <span v-else>
                                <!-- Dato nombre -->
                                {{ paciente.nombre }}
                            </span>
                        </td>
                        <td>
                            <span v-if="formActualizar && idActualizar == index">
                                <!-- Formulario para actualizar -->
                                <input v-model="edadActualizar" type="text" class="form-control">
                            </span>
                            <span v-else>
                                <!-- Dato edad -->
                                {{ paciente.edad }}
                            </span>
                        </td>
                        <td>
                            <!-- Botón para guardar la información actualizada -->
                            <span v-if="formActualizar && idActualizar == index">
                                <button @click="guardarActualizacion(index)" class="btn btn-success">Guardar</button>
                            </span>
                            <span v-else>
                                <!-- Botón para mostrar el formulario de actualizar -->
                                <button @click="verFormActualizar(index)" class="btn btn-warning">Actualizar</button>
                                <!-- Botón para borrar -->
                                <button @click="borrarPaciente(index)" class="btn btn-danger">Borrar</button>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Vue({
                el: '#appPacientes',
                data: {
                    // Input nombre
                    nombre: '',
                    // Input edad
                    edad: '',
                    // Ver o no ver el formulario de actualizar
                    formActualizar: false,
                    // La posición de tu lista donde te gustaría actualizar
                    idActualizar: -1,
                    // Input nombre dentro del formulario de actualizar
                    nombreActualizar: '',
                    // Input edad dentro del formulario de actualizar
                    edadActualizar: '',
                    // Lista de pacientes
                    pacientes: []
                },
                methods: {
                    crearPaciente: function () {
                        // Anyadimos a nuestra lista
                        this.pacientes.push({
                            id: + new Date(),
                            nombre: this.nombre,
                            edad: this.edad
                        });
                        // Vaciamos el formulario de añadir
                        this.nombre = '';
                        this.edad = '';
                    },
                    verFormActualizar: function (paciente_id) {
                        // Antes de mostrar el formulario de actualizar, rellenamos sus campos
                        this.idActualizar = paciente_id;
                        this.nombreActualizar = this.pacientes[paciente_id].nombre;
                        this.edadActualizar = this.pacientes[paciente_id].edad;
                        // Mostramos el formulario
                        this.formActualizar = true;
                    },
                    borrarPaciente: function (paciente_id) {
                        // Borramos de la lista
                        this.pacientes.splice(paciente_id, 1);
                    },
                    guardarActualizacion: function (paciente_id) {
                        // Ocultamos nuestro formulario de actualizar
                        this.formActualizar = false;
                        // Actualizamos los datos
                        this.pacientes[paciente_id].nombre = this.nombreActualizar;
                        this.pacientes[paciente_id].edad = this.edadActualizar;
                    }
                }
            });
        });
    </script>
</body>
</html>

¿Te ha resultado útil? Déjame un comentario.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...