将响应 vue JS 附加到组件表中

Question

我正在将我的响应 vue 附加到表格中，但我不能，我也不知道为什么。我可以从我的数据库中获取我的所有数据，我可以在我的网络浏览器控制台中显示它，但我的表是空的。

我附上我的实际代码。

vueJS 请愿书和组件

    <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>

结果在我的控制台中

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

Answer 1

你需要遍历它并使用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>