Vue.js 在某些 属性 处组合对象

Question

vue 新手，需要一些帮助...

我有两个对象数组从 firestore 返回，运动员和活动。

活动有一个athlete_id

我在 v-for 中列出所有活动，但需要访问每个 activity 的一些运动员数据。

What/Where 是在 vue 组件中添加这个的最佳位置吗？

我用一种方法做到了，但这似乎是一种糟糕的方法，因为对 activity 运动员有多次调用并且每次都必须执行查找？

粗略样本。

<template>
<div class="todays-rides">
    <div class="ride" v-for="activity in activities" :key="activity.activity_id">
        <img :src="activityAthlete(activity.athlete_id).profile>
        <div class="name">
            {{activityAthlete(activity.athlete_id).firstname}}{{activityAthlete(activity.athlete_id).lastname}}
        </div>
        <div class="activity-data">
            .....
        </div>
    </div>  
</div>
</template>    

<script>
export default {
data() {
    return {
        activities: [],
        athletes: []
    }
},

firestore() {
    return {
        activities: db.collection('activities')
        athletes: db.collection('athletes')
    }
},

methods: {
    activityAthlete(id) {
        const athlete = this.athletes.find(o => o.athlete_id === id)
        return athlete
    }
}
...

以上确实有效，但它也会抛出类型错误：“无法读取未定义的 属性 'profile'。

Answer 1

使用 computed 属性 到 return 组合 athletes 和 activity 的对象。类似于：

computed:{
    combined(){
        return this.activities.map(a=>{
            a['athlete'] = this.activityAthleted(a.athlete_id)
            return a
        })
    }
}