List.vue

<template>
<div class="list-group">
    <NuxtLink
      :to="'/hash/'+getNeighbor(certif).hash"
      class="list-group-item list-group-item-action"
      :class="'list-group-item-'+ $options.filters.dateStatus(certif.expires_on)"
      v-for="certif in certifsTriees"
      :key="getNeighbor(certif).uid">
        {{ getNeighbor(certif).uid }}
        <BadgeStatus :statut="getNeighbor(certif).status" />
        <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
    </NuxtLink>
</div>
</template>

<script>
export default {
    props : {
        certifs : Array,
        type : {
            type: String,
            required: true,
            validator: function (value) {
                const types = ['recieved','sent']
                return types.indexOf(value) !== -1
            }
        }
    },
    methods : {
        getNeighbor(certif) {
            return this.type == "recieved" ? certif.from : certif.to
        }
    },
    computed : {
        certifsTriees() {
            return this.certifs.sort(
                (a, b) => a.expires_on - b.expires_on
            )

        }
    }
}
</script>

<style>

</style>