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