如何在 Vue.js 的嵌套数组中获取正确的对象？

Question

我使用Axios显示一个JSON数据，我已经成功了。但我想根据日期和时间显示一个对象，它现在显示所有数据，我需要对其进行过滤。

所以我想查看今天的日期并根据该日期显示对象，因此我想显示下一个即将发生的事件。 (24/05/2020)

我目前拥有的：

json：

{
    "doc": [
        {
            "data": {
                "events": {
                    "18807612": {
                        "_dt": {
                            "_doc": "time",
                            "time": "18:45",
                            "date": "14/05/20",
                            "tz": "UTC",
                            "tzoffset": 0,
                            "uts": 1566067500
                        },
                        "week": 33,
                        "teams": {
                            "home": {
                                "name": "name 1",
                                "mediumname": "name1",
                                "uid": 3014
                            },
                            "away": {
                                "name": "name 2",
                                "mediumname": "name 2",
                                "uid": 3020
                            }
                        }
                    },
                    "18807618": {
                        "_dt": {
                            "_doc": "time",
                            "time": "18:45",
                            "date": "24/05/20",
                            "tz": "UTC",
                            "tzoffset": 0,
                            "uts": 1566067500
                        },
                        "week": 33,
                        "teams": {
                            "home": {
                                "name": "name 1",
                                "mediumname": "name1",
                                "uid": 3014
                            },
                            "away": {
                                "name": "name 2",
                                "mediumname": "name2",
                                "uid": 3020
                            }
                        }
                    }
                }
            }
        }
    ]
}

商店：

async loadPosts({ commit }) {
    // Define urls pages
    const urlEvents = 'http://api.example.com/302020';

    // Set pages
    const [
      responseEvents
    ] = await Promise.all([
      // Responses pages
      this.$axios.get(urlEvents)
    ]);

    // variables pages
    this.events = responseEvents.data.doc[0].data.events

    // mutations pages
    commit('SET_EVENTS', this.events)
  }
},

mutations: {
  SET_EVENTS (state, events) {
    state.events = events;
  }
}

为了显示我使用的数据：

import {mapState} from 'vuex';

export default {
  name: 'NextMatch',
  mounted() {
    this.$store.dispatch('loadPosts')
  },
  computed: {
    ...mapState([
      'events'
    ])
  }
}

<h1>{{events}}</h1>

但这显示了所有数据，我试图获得的是带有"uid": 3014 的对象的第一个即将发生的事件。

所以我想显示主客队的日期、时间和名称。

如何通过过滤数据得到正确的数据？

Answer 1

类似或类似的东西应该可以工作：

在你的 Vue 组件的<template>:

`<h1>{{selectedEvent._dt.date}}</h1>`

在你的 Vue 组件的<script>:

    props: {
        eventID: {
          type: Number,
          default: 3014
        },
    },
    computed: {
      ...mapState([
        'events'
      ]),
      eventsArr(){
        if (!this.events) return {} //make sure Object.entries gets object.
        return Object.entries(this.events)
      },
      selectedEvent(){
        const selectedArr = this.eventsArr.find(([eID, e]) => e.teams.home.uid === this.eventID)
        return selectedArr[1]
      } 
    }