➜ CRUD LIST | Mostrar registros con Vue.js

¡Sumérgete en el desarrollo web con este tutorial práctico donde aprenderás a construir un CRUD List para mostrar la lista de usuarios! Utilizaremos VueJS para la interfaz dinámica y PHP junto con MySQL para gestionar la información del usuario. Desde la configuración inicial hasta la visualización de datos en tiempo real, este tutorial te proporcionará las habilidades esenciales para crear aplicaciones web interactivas.

Html

<div class="page">
            <H1 class="text-center">VUE JS | API REST EN PHP MYSQL</H1>
            <button @click="modalCreate=true">Create</button>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>EMAIL</th>
                    <th>IMAGE</th>
                    <th>ACCIÓN</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>
                        <img :src="'img/'+user.image" width="100">
                    </td>
                    <td>
                        <button @click="modalUpdate=true; selectUser(user)">Edit</button>
                        <button @click="modalDel=true; selectUser(user)">Del</button>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>

Vue JS

const app= Vue.createApp({
    data() {
        return{
            message : "Hola Vue !!!!",
            users:[]
        }
    },
    mounted(){
        this.getUsers()
    },
    methods:{
        getUsers(){
            axios.get(api+"?opc=list")
            .then(function(response){                
                app.users = response.data.users
            })
        },}).mount("#app")