Question

我正在使用laravel和vue.js，正在制作时间表。我需要按开始日期对帖子列表进行排序吗？

我还会有重复的日期。任何帮助都会很好，谢谢。

我按计算所得的属性排序吗？

我页面上的输出是这样的帖子列表。

图片 2019-12-30 02:58:12

这是测试

图片 2010-10-30 02:58:12

这是一个测试

图片 2019-12-30 02:58:12

这是测试

我的时间轴组件。

<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>

我的时间轴数据库是

<?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');
   }
}

我的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

按升序或降序排列，如下所示

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

        return new TimelineCollection($timeline);
    }
}

laravel vue.js按日期对数据进行排序

1 个答案: