如何在Vuetify数据表中展示嵌套Firebase数据（用户活动申请状态）

我来帮你搞定这个状态显示的问题！核心问题在于你没找对Firebase嵌套数据的访问方式——applicants是一个以用户UID为键的对象，不是数组，所以match方法根本不适用。下面是一步步的解决方案：

1. 修正表格模板的状态单元格代码 #

直接通过用户UID作为键访问applicants对象，同时加上空值判断避免控制台报错：

<template slot="items" slot-scope="props">
  <td>{{ props.item.title }}</td>
  <td>{{ props.item.city }}</td>
  <td>{{ props.item.startDate | moment("dddd, MMMM Do YYYY") }}</td>
  <td>
    <!-- 用用户ID直接访问对象属性，可选链避免空值报错，默认显示Pending -->
    {{ props.item.applicants?.[this.user.id]?.status || 'Pending' }}
  </td>
</template>

这里的?.是可选链操作符，能在applicants不存在、或者当前用户没有申请记录时，避免抛出Cannot read property 'status' of undefined的错误，同时默认显示Pending作为兜底。

2. 优化Vuex的isUserApplied Getter（可选） #

如果想在Vuex层面统一处理状态逻辑，可以修改这个getter，让它直接返回申请状态，而不只是布尔值：

// Vuex Getters部分
isUserApplied: (state) => (eventId) => {
  const user = state.user;
  // 先判断必要数据是否存在
  if (!user || !state.eventsMap[eventId] || !state.eventsMap[eventId].applicants) {
    return 'Pending';
  }
  // 返回用户对应的状态，无数据则默认Pending
  return state.eventsMap[eventId].applicants[user.id]?.status || 'Pending';
}

之后在表格里直接调用这个getter就行：

<td>{{ $store.getters.isUserApplied(props.item.id) }}</td>

3. 确认数据结构一致性 #

注意你描述里写的Firebase节点是applications，但代码里用的是applicants，一定要确保两者名称完全匹配！如果Firebase里的节点是applications，记得把代码里的applicants全部替换成applications。

4. 关于filteredEvents的补充 #

你的计算属性filteredEvents逻辑是对的，已经成功过滤出用户已申请的活动，搭配上面的状态读取代码就能正常显示状态了。

这样调整后，表格就能正确展示每个已申请活动的Pending或Accepted状态啦！

内容的提问来源于stack exchange，提问作者Greg Fielding