從 graphql 循環數據到 Nuxt

Question

所以我是 vue 的初學者，正在嘗試一個小項目，我有來自 graphql API 的數據，我想將這些數據表示到前端。

最初，我在前端以硬編碼的方式呈現這些數據。

下面介紹了我如何獲取所述數據

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

並將我的數據顯示在卡片上，如下所示：

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

但現在我想使用 for 循環在卡片中顯示數據。 我在考慮 for..in 循環，我會怎么處理這個問題？

Answer 1

假設您使用的是Vuetify 卡組件。

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