表视图 orderBy 失败

Question

我对 vue 表有疑问。从 Laravel 我得到正确排序的数据（参见 Laravel: 中的代码），当传递到 vue 时，数据顺序失败（参见 Fail_description 图像）。我需要将数据按 booking_date 升序排列到第一行的新预订。

HTML:

        <div class="row">
            <div class="col-xs-12">

                <div class="table">
                    <v-client-table :data="{{json_encode($orders)}}" :columns="headers" :options="options"></v-client-table>
                </div>

                <div class="spinner" v-if="loading">
                    <!--<div class="spinner" v-if="isSending">-->
                    <loader :loading="loading" :color="color" :size="loaderSize" class="text-center"></loader>
                </div>
            </div>

        </div>
    </div>

Vue：

var app = new Vue({

        el: '#app',
        data: {
            headers: ['from', 'booking_date', 'service_date',  '_viewmore'],
            options: {
                headings: {
                    _viewmore: 'View more',
                    from: 'Client name',
                },
                filterable: ['from','email','service_date'],
                orderBy: { 'column': 'booking_date'},
                templates: {
                    _viewmore: function (row) {
                        return '<a class="btn btn-primary" href="/bookings/' + row.id + '">View more</a>';
                    }
                }
            }
        },
        computed: {
            _orders: function () {
                if( _.isString(this.orders) ) {
                    try {
                        return JSON.parse(this.orders)
                    }
                    catch(e) {
                        return this.orders
                    }
                }

                return this.orders;
            }
        }

    });

Laravel:

array:10 [▼
    0 => array:7 [▼
      "id" => 23
      "from" => "Charlotte Ferard"
      "email" => "charlotte@ferard.co.uk"
      "service_date" => "22.4.17"
      "service_time" => "09:00 - 10:00"
      "booking_date" => "18.4.17"
    ]
    1 => array:7 [▼
      "id" => 25
      "from" => "Sophia Saunders"
      "email" => "sophia_saunders@example.com"
      "service_date" => "29.4.17"
      "service_time" => "13:00 - 14:00"
      "booking_date" => "18.4.17"
    ]
    2 => array:7 [▼
      "id" => 27
      "from" => "Emma Newell"
      "email" => "emziebob@example.com"
      "service_date" => "30.4.17"
      "service_time" => "12:00 - 13:00"
      "booking_date" => "18.4.17"
    ]
    3 => array:7 [▼
      "id" => 28
      "from" => "Daniel Britz"
      "email" => "britzy4472@example.com"
      "service_date" => "29.4.17"
      "service_time" => "09:00 - 10:00"
      "booking_date" => "18.4.17"
    ]
    4 => array:7 [▼
      "id" => 30
      "from" => "Rico Lengefeld"
      "email" => "ricoandshanti@example.com"
      "service_date" => "22.4.17"
      "service_time" => "09:00 - 10:00"
      "booking_date" => "18.4.17"
    ]
    5 => array:7 [▼
      "id" => 31
      "from" => "Nikos Laleas"
      "email" => "nlaleas@example.com"
      "service_date" => "21.4.17"
      "service_time" => "09:00 - 10:00"
      "booking_date" => "19.4.17"
    ]
    6 => array:7 [▼
      "id" => 37
      "from" => "Samantha Nicklin"
      "email" => "samantha.nicklin@example.com"
      "service_date" => "29.4.17"
      "service_time" => "11:00 - 12:00"
      "booking_date" => "19.4.17"
    ]
    7 => array:7 [▼
      "id" => 41
      "from" => "Gail Mathews"
      "email" => "lipyd@example.com"
      "service_date" => "7.5.17"
      "service_time" => "09:00 - 10:00"
      "booking_date" => "5.5.17"
    ]
    8 => array:7 [▼
      "id" => 43
      "from" => "Miriam Hogan"
      "email" => "fofivecyq@example.com"
      "service_date" => "11.5.17"
      "service_time" => "10:00 - 11:00"
      "booking_date" => "8.5.17"
    ]
    9 => array:7 [▼
      "id" => 51
      "from" => "Yuli Hodge"
      "email" => "tevijiduf@example.com"
      "service_date" => "12.5.17"
      "service_time" => "15:00 - 16:00"
      "booking_date" => "10.5.17"
    ]
  ]

Fail_description

Answer 1

booking_date 以字符串形式出现。您需要将其转换为日期才能按日期正确排序。

表视图 orderBy 失败

vue tables orderBy fail

vue.js

laravel-5.3

vuejs2