Ich bin neu bei Vue und verstehe nicht, was ich hier falsch mache.
Ich habe diese einfache Komponente:
<template> <template v-if="loading"> Loading... </template> <template v-else> <div class="row"> {{ row }} </div> </template> </template> <script> import { api } from 'src/boot/axios'; import { useUserLoginStore } from 'src/stores/UserLoginStore'; export default { async mounted() { this.loading = true try { const res = await api.get(`/v-cards/slug/${this.$route.params.slug}`, { headers: { Authorization: `Bearer ${useUserLoginStore().userToken}`, } }); this.rows = await res.data this.loading = false console.log('rows', this.rows) } catch (error) { this.error = true console.log(error) this.loading = false } }, data() { return { loading: false, row: [], } }, } </script>
Aber wenn ich die Seite rendere, sehe ich nur ein leeres Array. Der API-Aufruf ist in Ordnung, da ich die korrekten Daten im Konsolenprotokoll sehe.
您等待 res.data
有什么具體原因嗎?您已經(jīng)在等待上面的 api 調用響應。我相信刪除 res.data
前面的等待應該可以解決您的問題。
更改此行:
this.rows = await res.data
對此:
this.rows = res.data
這是假設 res.data
正是您期望的數(shù)組。并且不嵌套在另一個對象屬性中。
此外,在模板中,您應該使用rows
而不是row