Looping data from graphql into Nuxt

Question

So I am a beginner at vue and was trying a small project and I have data from graphql API that i want to represent into the frontend.

Initially I was presenting this data in a hard coded way in the frontend.

Below presents how I fetch said data

const measurements = (await useAsyncData('measurements', async () => {
      const result = await $client.request(query)
      return result
    })).data

and had my data presented on cards like so:

 const cards = [
       { name: 'Fist', icon: ScaleIcon, amount: metrics.value.adminMeasure[5].value},
      { name: 'Second' icon: ScaleIcon, amount: metrics.value.adminMeasure[6].value },
       { name: 'Third',icon: ScaleIcon, amount: metrics.value.adminMeasure[0].value},
     
      
     ]

But now I want to present the data in the cards using a for loop. I was thinking of for..in loop, how would i go about this?

Answer 1

Assuming that you are using Vuetify card components .

<template>
  <v-row>
    <v-col v-for="card in cards" :key="card.name" cols="12>
     <v-card class="mx-auto" max-width="344">
        <v-card-text>
          // Render content here
        </v-card-text>
     </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data: (() => {
    return {
      cards: [] // Add your cards here
    };
  })
}
<script>