如何在VUETIFY数据表项Prop中显示嵌套数据

Question

我们有一个带有用户和事件的应用程序。用户申请工作活动。我想创建一个vuetify数据表，该数据表显示了用户所应用的节目，以及他们的每个节目的应用状态。

我们的firebase数据被嵌套为：event -event.uid-应用程序 - application.id(与user.uid匹配( - 状态

我们的表代码：

<v-data-table
v-bind:headers="headers"
  :items="filteredEvents"
  :rows-per-page-items="[10,25, { text: 'All', value: - 1}]"
>
<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>{{ props.item.applicants.match(user.id).status }}</td>
</template>
</v-data-table>

申请人状态TD是我们希望"待处理"或"接受"出现的地方。那里的代码无效。我希望它是这样起作用的，但事实并非如此。

计算：

filteredEvents(){
  return this.$store.getters.loadedEvents.filter((event) => {
    return this.$store.getters.isUserApplied(event.id);
   })
}

vuex：

getInitialEventsState({ commit }) {
  let db = firebase.database();
  db.ref("/events").on("value", function (snapshot) {
    let data = []
    for (var key in snapshot.val()) {
      let event = snapshot.val()[key];
      event.id = key
      data.push(event)
    }
    commit("setLoadedEvents", data)
    commit("setEventsMap", snapshot.val());
  })
}
isUserApplied: (state) => (id) => {
  let user = store.getters.user
  if (user && state.eventsMap[id] && state.eventsMap[id].applicants) {
    let status = state.eventsMap[id].applicants[user.id]
    if(status && status.status) {
      return status.status;
    } else {
      return null;
    }
  }
  return false
}

loadedEvents(state) {
  return state.loadedEvents
}

作为申请2个事件的用户，我可以在数据表中看到这两个事件。名称，城市和开始的所有展示，但我的状态却没有。

解决此问题的最佳方法是什么？

谢谢！

Answer 1

这可能会或可能不会帮助您，因为我看不到您的事件对象结构。但是您说数据是嵌套的。看到什么是数组而不是对象，这将很有帮助。因此，如果您可以以代码形式显示它，这将有所帮助。因此，这里的其他用户可能希望看到某种答案...

当我使用firestore数据时，通常以一个对象数组的形式，每个对象都具有/持有其他数组。到达该内部嵌套数据可能具有挑战性。因此，我将文档作为项目传递给数据表，然后在TD标签中使用此一点代码：

<td class="text-xs-left">
  {{ getNestedObject(props.item, ['someArray', index, 'someProp']) }}
</td>

methods: {
   getNestedObject(nestedObj, pathArr) {
      return pathArr.reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), nestedObj)
   },
}

这是我的灵感来源：访问javascript中的嵌套对象