Vue JS -遍历组件

Question

我目前正在重构我的代码，使它看起来更干净，我偶然发现一个部分看起来不太整洁，可能不是执行这类代码的最佳实践。

统计数据。value -在这里，我使用StatisticsCard组件3次，以显示每个组件的每个相关数据

<template>
<div class="statistics-section">
<img class="statistics-image" src="@/assets/img/images/[e-mail]" alt="">
<h3 class="section-title">Statistieken</h3>
<p class="section-description">De studenten van Het Creiler hebben samen ...</p>
<div class="statistics-cards">
<StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
:title="'kilometers'"
:number="kilometers"
:type="'GELOPEN'"/>
<StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
:title="'stukken'"
:number="trashCollected"
:type="'AFVAL OPGRUIMD'"/>
<StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
:title="'foto's'"
:number="photosTaken"
:type="'GEDEELD'"/>
</div>
</div>
</template>
<script>
import StatisticsCard from '@/components/partials/onepager/StatisticsCard';
export default {
name: 'Statisticts',
components: {StatisticsCard},
props: {
kilometers: {
type: Number,
required: true
},
trashCollected: {
type: Number,
required: true
},
photosTaken: {
type: Number,
required: true
},
},
}

学校。vue -这是主要组件，我在这里进行所有相关的api调用。统计数据。呈现Vue以显示来自api的所有信息。

<div class="section-grid">
<Statistics :kilometers="schoolOnepager.statistics.collectedTrashCount"
:trash-collected="schoolOnepager.statistics.schoolSharedPhotosTrashCount"
:photos-taken="schoolOnepager.statistics.schoolTotalDistanceWalked"/>
</div>
...
computed: {
schoolOnepager: function () {
return this.$store.getters.getSchoolOnepager;
},
}

有没有更好的方法，我可以做到这一点，而不是定义统计卡片组件3次，我可以循环，让他们每个人都显示特定的信息。

Answer 1

您可以创建一个统计对象数组，并循环它们。

，例如在VueX Store:

statistics: [
{
title: 'kilometers',
number: 12,
type: 'GELOPEN'
},
{
title: 'kilometers',
number: 5,
type: 'GELOPEN'
}
]

*数据是学校要求的。从这里开始，存储中的数据发生了变化。在统计数据。数据是一个名为schoolOnepager的计算属性，它从VueX存储中导入统计数据

然后重构你的模板组件:

<StatisticsCard v-for="(statistic, i) in statistics" key="i" :imageUrl="require('@/assets/img/images/[e-mail]')"
:title="statistic.title"
:number="statistic.number"
:type="statistic.type"/>

Answer 2

您可以直接在自定义组件上使用v-for，就像任何普通元素一样:

<StatisticsCard v-for="(item, index) in items" :key="index"
:title="'kilometers'"
:number="item.kilometers"
:type="item.type"
></StatisticsCard>

如果你的条目数组应该像

[
{
title: 'kilometers',
type: 'stunk'
},
{
title: 'hgdfb',
type: 'dvnvffv'
},
......
]