如何在 Vuetify 数据表项道具中显示嵌套数据？答案

【问题标题】：How to show nested data within Vuetify data table item prop?如何在 Vuetify 数据表项道具中显示嵌套数据？
【发布时间】：2018-09-02 17:18:50
【问题描述】：

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

我们的 firebase 数据嵌套为：events - event.uid - applications - application.id（与 user.uid 匹配）- status

我们的餐桌代码：

<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 都会显示，但我的状态没有。

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

谢谢！

【问题讨论】：

什么是.applicants.match(user.id).status？您商店的state 内的功能？ user.id 来自哪里？
我排好队了..它不起作用。但我确实添加了我的商店代码
显示loadedEvents getter
更新了问题中的代码
你试过<td>{{ props.item.applicants[user.id].status }}</td>吗？如果这不起作用，user.id 来自哪里？

标签： firebase vue.js vuetify.js

【解决方案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

【讨论】：