Question

我们有一个带有循环事件的活动应用。每个活动都有一个开始日期。在我们的循环中，我想只显示startDate在当前日期之后的事件。

我们的模板：

<v-card flat class="pa-2 mb-3 eventcard" v-for="event in filteredEvents.reverse()" :key="event.id">
        <v-layout v-if="event.title" row wrap>
          <v-flex md3>
          <img class="media-image pr-1 pl-1" v-bind:src='event.imageUrl'>
          </v-flex>
          <v-flex md9>
            <v-card-title primary-title class="pb-0 pt-0 text-xs-center">

            </v-card-title>
            <v-card-text class="pt-0 text-xs-center text-md-left">
                <div class="display-1 mb-1"><router-link :to="`/events/` + event.slug" class="td-none plink">{{event.title}}</router-link></div>

                <div class="caption">Cerda Productions | {{ event.startDate | moment("dddd, MMMM Do YYYY") }} - {{ event.endDate | moment("dddd, MMMM Do YYYY") }} | {{ event.venue }} - {{ event.city }}, {{ event.state }}</div>

                <router-link :to="`/events/` + event.slug" class="td-none plink"><v-btn round color="accent" class="mt-2">Learn More<v-icon right>chevron_right</v-icon></v-btn></router-link>

            </v-card-text>
          </v-flex>
        </v-layout>
    </v-card>

式计算：

filteredEvents: function(){
    return this.$store.getters.loadedEvents.filter((event) => {
      return event.title.toLowerCase().match(this.search.toLowerCase())
    })
    .sort(function(a, b) {
      return new Date(b.startDate) - new Date(a.startDate);
    })
  },

Answer 1

您可以使用添加到计算属性的标准Date比较：

filteredEvents: function(){
    let currentDate = new Date();
    return this.$store.getters.loadedEvents.filter((event) => {
      return event.title.toLowerCase().match(this.search.toLowerCase())
                 && new Date(event.startDate) > currentDate;
    })
    .sort(function(a, b) {
      return new Date(b.startDate) - new Date(a.startDate);
    })
  },

我将它添加到当前的filter函数中。您可以链接新的filter来电。性能方面没有差异。

虽然它可能不重要（你的阵列可能不够大，但它不重要），在filter之前，sort最好像你现在一样。

如何只在v-for循环中显示即将发生的事件？

1 个答案: