Impossible d'accéder aux données dans Vue via la demande d'obtention d'Axios
P粉204079743
P粉204079743 2023-09-12 14:07:12
0
1
748

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.

P粉204079743
P粉204079743

répondre à tous(1)
P粉714844743

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal