Tidak dapat mengakses data dalam Vue melalui permintaan dapatkan Axios
P粉204079743
P粉204079743 2023-09-12 14:07:12
0
1
726

Saya baru menggunakan vue dan saya tidak faham apa salah saya di sini.

Saya mempunyai komponen mudah ini:

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

Tetapi apabila saya memaparkan halaman, saya hanya melihat tatasusunan kosong. Panggilan api adalah baik kerana saya melihat data yang betul dalam log konsol.

P粉204079743
P粉204079743

membalas semua(1)
P粉714844743

Anda tunggu res.data 有什么具体原因吗?您已经在等待上面的 api 调用响应。我相信删除 res.data Penantian sebelum ini sepatutnya menyelesaikan masalah anda.

Tukar baris ini:

this.rows = await res.data

Untuk ini:

this.rows = res.data

Ini mengandaikan res.data betul-betul susunan yang anda jangkakan. dan tidak bersarang dalam harta objek lain.

Selain itu, dalam templat anda harus menggunakan rows而不是row

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan