来自API的数据未显示在网站上，但未显示错误vuejs + axios

Question

我现在正在学习vue js，并尝试使用axios从这个站点https://reqres.in/获取API数据。我想把像电子邮件，名字这样的数据放进卡片里。它没有显示错误，因为卡片正在循环，但数据本身，如电子邮件和姓名，没有显示出来。我该如何解决这个问题？

这是我的脚本

  data() {
    return {
      users: [],
    };
  },
  methods: {
    setUsers(data) {
      this.users = data;
    },
  },
  mounted() {
    axios
      .get("https://reqres.in/api/users")
      .then((response) => this.setUsers(response.data))
      .catch((error) => console.log("Gagal : ", error))
  },

我的名片

<div class="row mb-3">
      <div class="col md-2 mt-4" v-for="user in users" :key="user.id">
        <card :user="user"/>
      </div>
</div>

和我的卡片组件

<template>
  <div>
    <h2>Card API {{user.email}}</h2>
  </div>
</template>

<script>
export default {
  name: 'card',
  props: ['user']
};
</script>

我的网站上的输出只是'Card API‘循环了6次，因为总数据是6，而不是电子邮件。请帮帮忙，谢谢

Answer 1

您获得的response.data是您从该接口获取的对象。您需要访问此对象的"data“属性：

.then((response) => this.setUsers(response.data.data))