append response vue JS into component table

i´m traying append my response vue into a table but i can´t and i don´t know why. i can get all my data from my database, i can show it en my web brower console but my table is empty.

i attach my actual code.

vueJS petition and component

    <template>

    <div class="tabla-asistencias">
        <table class="table table-hover table-striped">
            <thead>
                <th>Id</th>
                <th>Fecha</th>
                <th>Estado</th>
            </thead>
            <tbody>
                <tr>
                    <td>{{ datosAsistencia.id }}</td>
                    <td>{{ datosAsistencia.fecha }}</td>
                    <td>{{ datosAsistencia.mensaje }}</td>
                    <td>{{ datosAsistencia.estado }}</td>
                    
                </tr>
            </tbody>
        </table>
    </div>

        
</template>



<script>

    export default {

        data() {
            return {
                datosAsistencia: [],
                isOpen: false,
                selectedItem: {},
            };

        },
        created: function () {
            this.cargar();
        },
        methods: {
            cargar: function () {
                let url = "/getAsistencias";
                axios
                    .get(url)
                    .then((response) => {
                        this.datosAsistencia = response.data;

                    })
                    .catch((error) => console.error(error));
            }
        },
    };
</script>

Result in my console

 (3) [{…}, {…}, {…}, __ob__: Observer]
0: {…}
1: {…}
2: {…}
length: 3
__ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
__proto__: Array

Answer

you need to loop over it and show using v-for

<tr v-for="data in datosAsistencia" :key="data.id">
    <td>{{ data.id }}</td>
    <td>{{ data.fecha }}</td>
    <td>{{ data.mensaje }}</td>
    <td>{{ data.estado }}</td>
</tr>

Advertisement

Answer