Vue中使用Axios发起Get请求后无法获取数据的问题

核心问题是变量名不匹配：

• 你在data()里声明的是row，但在mounted钩子中把API返回值赋值给了this.rows（多了一个s）
• 模板中绑定的是{{ row }}，而row始终保持初始的空数组状态，所以页面显示空数组

修正方案（二选一即可） #

方案一：统一使用row变量 #

修改mounted中的赋值语句，将this.rows改为this.row：

async mounted() {
  this.loading = true
  try {
    const res = await api.get(`/v-cards/slug/${this.$route.params.slug}`, {
      headers: {
        Authorization: `Bearer ${useUserLoginStore().userToken}`,
      }
    });
    // 修正变量名，和data中的row保持一致
    this.row = res.data
    this.loading = false
    console.log('row', this.row)
  } catch (error) {
    this.error = true
    console.log(error)
    this.loading = false
  }
},

如果API返回的是单个对象而非数组，建议把data()里的初始值从[]改成{}，避免页面显示空数组的格式：

data() {
  return {
    loading: false,
    row: {}, // 单个对象用{}初始化更合理
  }
},

方案二：统一使用rows变量 #

1. 修改data()中的变量名：

data() {
  return {
    loading: false,
    rows: [],
  }
},

2. 修改模板中的绑定内容：

<template v-else>
  <div class="row">
      {{ rows }}
  </div>
</template>

为什么会出现这个问题？ #

Vue的响应式系统只对data()中声明的变量生效，你之前赋值的this.rows并未在data()中定义，虽然控制台能打印出该变量的值，但它不是响应式变量，且模板绑定的是row，所以row始终是初始的空数组，页面自然显示空数组。

内容的提问来源于stack exchange，提问作者viac92