如何在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: {
      events(){
        return this.$store.state.events
      },
      selectedEvent(){
        return this.events.find(x => x.teams.home.uid === this.eventID)
      } 
    }