Sorting data in ascending order in v-for

Question

I'm having troubles trying to sort a data array by date in a v-for loop. I tried orderBy but didn't manage to make it.

Here is the simplified v-for loop :

<div v-for="article in articles">
   <div class="article-date">{{ article.dateYear }}/{{ article.dateMonth }}</h1>
   <h1>{{ article.title }}</h1>
   <h3>{{ article.description }}</h3>
</div>

My basic computed property :

 articles() {
       return this.$store.state.articles;
 }

Each article have a dateDay, dateMonth and dateYear, so what I wanted to do was date = article.dateYear + article.dateMonth + article.dateDay and use the date variable with orderBy, but it doesn't work out.

Is that a better way to do it?

Thank you for your time!

Answer 1

In the articles helper sort the articles first:

articles() {
    const { articles } = this.$store.state;
    articles.sort(function(a,b){
        return new Date(b.date) - new Date(a.date);
    });
    return articles;
}