Question

我有一系列日历事件，其日期格式为： 20190517T010000Z 。

我需要根据以下条件过滤数组：

1）未来事件（发生的事件大于NOW）

2）过去的事件（发生的事件少于NOW）

3）在过去7天（NOW-7天）内创建的新活动

下面有一个硬编码的示例-但需要NOW是动态的并基于用户的系统时间。我无法弄清楚如何以与数组中获取的日期时间格式相同的格式获取NOW。另外，我不知道它应该在代码中的什么位置（在单独的JS文件中还是在Vue组件中）？

一旦我在下面列出的组件中使用它，它将被移至VUEX Getter。

<template>
    <div class="text-left m-4 p-4">
        <div>
            Total Number Events: {{ allEvents.length }}
        </div>
        <div>
            Events Created In Last 7 Days: {{ createdEvents }}
        </div>
        <div>
            Future Events: {{ futureEvents }}
        </div>
        <div>
            Past Events: {{ pastEvents }}
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['allEvents']),

    futureEvents () {
      return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart >= '20190517T010000Z').length
    },

    pastEvents () {
      return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart <= '20190517T235900Z').length
    },

    createdEvents () {
      return this.$store.state.allEvents.filter(
        allEvents => allEvents.created >= '20190511T235900Z' && allEvents.created <= '20190517T235900Z' )
        .length
    }
  },
}
</script>

上面的代码可以工作-但现在已被硬编码，并且需要动态。任何想法或建议都将受到欢迎。

Answer 1

所有日期时间对象都应作为UNIX时间戳（自1970年1月1日以来的UTC秒）保留。这样一来，无论时区如何，您都可以比较整个系统的时间。

假设您的Vuex存储中的事件是使用.in作为UNIX时间戳存储的，以下代码片段应为您提供所需的动态行为。

我已经在组件的数据中创建了一个dstart属性。每秒更新一次，导致计算的属性刷新。

此外，如果Vuex存储中的now属性更新，则计算的属性也会刷新。

allEvents

如何在Vue.js中创建Date（now）以在计算属性中使用？

1 个答案: