CODEWITHSUNDEEP
javascriptvue.js
Abbi KRK
Abbi KRK

Reputation: 53

Data from API doesn't show up in website but shows no error vuejs + axios

I'm learning vue js right now, and trying to get API data from this site https://reqres.in/ with axios. I want to take the data like email, name and put it into a card. It shows no error because the card is looping, but the data itself, like email and name, doesn't show up. How do I fix this?

here's is my script

  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))
  },

my card

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

and my card components

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

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

the output on my site is just 'Card API' looping for 6 times because the total data is 6 but not the email. Please help, thank you

Upvotes: 0

Views: 616

Answers (1)

digitalniweb
digitalniweb

Reputation: 1142

The response.data you get is an object you fetched from the API. You need to access the "data" property of this object:

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

Upvotes: 2

Related Questions