Impossible d'accéder aux données dans Vue via la demande d'obtention d'Axios

Question

Je suis nouveau sur vue et je ne comprends pas ce que je fais de mal ici.

J'ai ce composant simple :

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

Mais lorsque je rends la page, je ne vois qu'un tableau vide. L'appel API fonctionne correctement car je vois les données correctes dans le journal de la console.

Answer 1

Vous attendez res.data 有什么具体原因吗？您已经在等待上面的 api 调用响应。我相信删除 res.data L'attente précédente devrait résoudre votre problème.

Modifiez cette ligne :

this.rows = await res.data

À ceci :

this.rows = res.data

Cela suppose que res.data correspond exactement au tableau auquel vous vous attendez. et non imbriqué dans une autre propriété d'objet.

De plus, dans les modèles, vous devriez utiliser rows而不是row