laravel vue.js sort data by date

Question

I am using laravel and vue.js, I am making a timeline. I need to sort a list of post by start date?

I will also have duplicate dates. Any help would be good thank you.

do i sort by a computed property?

The output on my page is a list of post like this.

Pic 2019-12-30 02:58:12

this is a test

Pic 2010-10-30 02:58:12

this is a test

Pic 2019-12-30 02:58:12

this is a test

My timeline component.

<template>
    <div>
        <app-post
            v-for="post in posts"
            :key="post.start_date"
            :post="post"
        />


        <div 
          v-if="posts.length"
            v-observe-visibility="{
               callback: handleScrolledToBottomOfTimeline
          }"
        >
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        data () {
           return { 
            page: 1,
            lastPage: 1
           } 
        },

        computed: {
            ...mapGetters({
                posts: 'timeline/posts'
            }), 

            urlWithPage () {
                return `/api/timeline?page=${this.page}`
            }
        },
        methods: {
            ...mapActions({
                getPosts: 'timeline/getPosts'
            }),

            loadPosts () {
                this.getPosts(this.urlWithPage).then((response) => {
                    this.lastPage = response.data.meta.last_page
                })
            },

            handleScrolledToBottomOfTimeline (isVisible) {
                if (!isVisible) {
                    return
                }

                if (this.lastPage === this.page) {
                    return
                }

                this.page++

                this.loadPosts()
            }
        },

        mounted () {
            this.loadPosts() 
        }
    }
</script>

My timeline database is

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTimelinesTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */
   public function up()
   {
       Schema::create('timelines', function (Blueprint $table) {
           $table->id();
           $table->timestamp('start_date');
           $table->timestamp('end_date');
           $table->string('header');
           $table->text('body');
           $table->timestamps();
       });
   }

   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('timelines');
   }
}

My TimelineController.php

<?php

namespace App\Http\Controllers;

use App\Timeline;
use App\Http\Resources\TimelineCollection;
use Illuminate\Http\Request;

class TimelineController extends Controller
{
    public function index()
    {
        $timeline = Timeline::paginate(3);

        return new TimelineCollection($timeline);
    }
}

Answer 1

Sort by ascending or descending order, like below

class TimelineController extends Controller
{
    public function index()
    {
        $timeline = Timeline::orderBy('start_date', 'ASC')->paginate(3); //or DESC

        return new TimelineCollection($timeline);
    }
}