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

Posted 2023-02-22

【中文标题】如何在 Vuetify 数据表项道具中显示嵌套数据？

【英文标题】：How to show nested data within Vuetify data table item prop?

【发布时间】：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 来自哪里？

【参考方案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