vue-wp/vue-theme/src/components/sidebars/events.vue

<template lang="pug">
//- most recent upcoming event - sidebar in events list - max=2?
h3.t-up events {{ listType }} 
ul.t-up
    li(v-for="post in events")
        router-link(:to="`/event/${post.slug}`")
            featured-image(:post="post", thumbsize="'standard'")
        router-link(:to="`/event/${post.slug}`")
            p.t-up {{ post.title }}
        p.date {{ dateFrom(post.start, true) }} &ndash; {{ dateFrom(post.end, true).split(',')[1] }}
</template>

<script>
import featuredImage from '@/components/featured-image'
import { postTypeGetters } from '@/pages/mixin-post-types'
import { sortTypes, formatDate } from '@/utils/helpers'

export default {
    mixins: [postTypeGetters],
    components: { featuredImage },
    computed: {
        loaded() {
            return this[`allEventsLoaded`]
        },
        events() {
            return this[`upcomingAndCurrentEvents`]
        },
    },
    data() {
        return {
            listType: 'current/upcoming',
        }
    },
    methods: {
        dateFrom: (unix, includeTime) => formatDate(unix, includeTime),
        async getPosts() {
            this.$store.commit('CLEAR_EVENTS')
            const upcoming = this.$store.dispatch(
                `getAllEvents`,
                {
                    sortType: sortTypes.currentAndUpcoming,
                    params: {
                        limit: 3,
                        page: 1
                    }
                }
            )
            if (upcoming.length < 1) {
                // this.listType = 'past'
                // this.$store.dispatch(`getAllEvents`, sortTypes.past)
            }
        },
    },
    created() {
        this.getPosts()
    },
}
</script>