VueJS：如何显示API返回的数字索引结构中的指定数据？

核心问题分析 #

1. Axios异步请求处理错误：axios.get()返回的是Promise对象，而非直接的响应数据，直接赋值this.profile = profile.data时，profile还处于未完成的异步状态，无法获取有效数据。
2. v-for遍历逻辑错误：API返回的是数组结构，数组中的每一项item就是单个用户对象（如{"id":"1234", "name":"John Doe"}），不需要通过item[0]去取值。
3. :key属性不规范：v-for的key应使用唯一标识（如item.id），而非直接绑定整个item对象。

修正后的代码示例 #

1. 正确处理Axios异步请求（二选一）

方法一：使用async/await（更简洁）

async mounted() {
  try {
    const response = await axios.get("api link here");
    this.profile = response.data;
  } catch (err) {
    console.log("数据请求失败：", err);
  }
}

方法二：使用then回调

mounted() {
  axios.get("api link here")
    .then(response => {
      this.profile = response.data;
    })
    .catch(err => {
      console.log("数据请求失败：", err);
    });
}

2. 修正v-for遍历代码

<ion-item v-for="item in profile" :key="item.id">
  <ion-label>{{ item.name }}</ion-label>
</ion-item>

仅获取特定数据（如John Doe）的处理 #

如果只需要单个用户的数据，无需v-for遍历，可在请求后直接过滤：

async mounted() {
  try {
    const response = await axios.get("api link here");
    // 筛选出name为John Doe的用户
    const targetUser = response.data.find(user => user.name === "John Doe");
    this.targetUser = targetUser;
  } catch (err) {
    console.log("数据请求失败：", err);
  }
}

对应模板代码：

<ion-item v-if="targetUser">
  <ion-label>{{ targetUser.name }}</ion-label>
</ion-item>

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