Curso CRUD en VUE JS con PHP y MYSQL
Actualización de Usuarios en VueJS y PHP: Tutorial Práctico de CRUD
Actualizaremos los campos incluyendo la funcionalidad para actualizar imágenes con vue.js y axios,
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()
})
}
,
4576 visitas
« Capítulo 5 – CRUD Insert Usuario | agregar un registro con Vue.js
Capítulo 7 – CRUD Delete | Eliminar usuario con Vue.js y axios »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024