Question

我们有一个包含用户和活动的应用。用户申请工作活动。我想创建一个vuetify数据表，向用户显示他们已应用的节目，以及每个节目的应用状态。

我们的firebase数据嵌套为：events - event.uid - applications - 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个事件的用户，我可以在数据表中看到这两个事件。名称，城市和startDate都显示，但我的状态不显示。

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

谢谢！

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)
   },
}

这是我的灵感来源：Accessing Nested Objects in JavaScript

如何在Vuetify数据表项目prop中显示嵌套数据？

1 个答案: