Inicio » Cursos » VUE.JS CRUD en PHP y MYSQL

Presentación del Curso

Base de Datos & Api Rest

SinglePage VueJS

Curso VUE.JS CRUD en PHP y MYSQL

Lección: 6 ➜ CRUD Update | Editar usuario con Vue.js y Axios JS

Actualizaremos los campos incluyendo la funcionalidad para actualizar imágenes con vue.js y axios,

Lección 6: CRUD Update | Editar usuario con Vue.js y Axios JS

Descubre cómo llevar tus habilidades de desarrollo web al siguiente nivel con nuestro tutorial detallado sobre la actualización de usuarios utilizando VueJS y PHP. Aprenderás a implementar operaciones de actualización en un sistema CRUD, desde la construcción de interfaces dinámicas hasta la gestión eficiente de datos en el servidor. Este tutorial forma parte de nuestro curso completo, proporcionándote las herramientas esenciales para crear aplicaciones web interactivas y actualizadas. 🚀💻

HTML

<!-- UPDATE-->
        <div class="contenedor" v-if="modalUpdate">
            <div class="modal">
                <h2>EDIT USER</h2>
                <input type="text" name="name" id="name" v-model="currentUser.name" ><br>
                <input type="email" name="email" id="email" v-model="currentUser.email"><br>
                <input type="file" id="image" name="image"/><br>
                <div class="buttons">
                    <button @click="modalUpdate=false;updateUser()">Save</button>
                    <button @click="modalUpdate=false">Cancel</button>
                </div>
            </div>
        </div>

VueJS

updateUser(){
            let  fd = new FormData()
            fd.append('id',app.currentUser.id)
            fd.append('name',document.getElementById('name').value)
            fd.append('email',document.getElementById('email').value)
            fd.append('image',document.getElementById('image').files[0])

            axios.post(api+"?opc=update",fd)
            .then(function(response){
                console.log(response.data)
                app.currentUser = {}
                app.getUsers()
            })
        },

4103 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023