Как отсортировать по дате используя bootstrap vue formdatepicker?

LogComponent.vue

<template>
<div class="log-container">
    <div class="log-filters-panel">
        <div class="date-filters">
            <b-form-datepicker id="startDateRange"
                               size="sm"
                               v-model="startDate"
                               :placeholder="currentDay"
                               right
                               :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"/>
            <b-form-datepicker id="endDateRange"
                               size="sm"
                               v-model="endDate"
                               :placeholder="currentDay"
                               right
                               :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"/>
        </div>
    </div>
    <div class="log-content">
        <div v-for="logItem in filteredData"
             :key="logItem.uuid"
             class="log-events-item"
        >
            <div>
                <span class="mr-2"><i class="fas fa-info-circle"></i></span>
                <span class="mr-2">{{ logItem.action_time }}</span>
                <span class="mr-2">{{ logItem.user }}</span>
                <span class="mr-2">{{ logItem.object_repr }}</span>
                <span class="mr-2">{{ logItem.change_message }}</span>
                <span></span>
            </div>
        </div>
    </div>

<script>
import moment from 'moment';

export default {
    name: 'LogFile',

    components: {},

    props: {
        systemLogs: Object,
        results: Array,
        object_repr: String,
        action_time: String,
        change_message: String,
        dataset: String,
    },

    data() {
        return {
            startDate: '',
            endDate: '',
            currentDay: null
        }
    },

    computed: {
       filteredData() {
            debugger
            let startDate = this.startDate;
            let endDate = this.endDate;
            return this.systemLogs.results.filter(function () {
                console.log(startDate, endDate);
                return this.action_time > startDate && this.action_time < endDate
            })

        }
    },

    methods: {
        updateCurrentTime() {
            this.currentDay = moment().format('DD.MM.YYYY');
        }
    },

    created() {
        this.currentDay = moment().format('DD.MM.YYYY');
        setInterval(() => this.updateCurrentTime(), 3600);
    }


}
</script>

<style lang="scss">
.log-container {
    // margin: 20px;
    font-size: 11px;
}

.log-filters-panel {
    padding: 5px 0;
}

.date-filters {
    display: flex;
}
.date-filters label {
    width: 90px;
}

.date-filters {
    font-size: 12px;
}

.system-event,
.date-picker {
    cursor: pointer;
}

.date-picker {
    cursor: pointer;
    margin-right: 13px;
}

.log-content {
    font-family: 'Fira Mono', sans-serif;
}

.log-events-item {
    padding: 3px 10px;
}

.log-events-item:nth-child(even) {
    background-color: #232427;
}

**example.json**

{
"results": [
    {
        "action_time": "2020-03-19T16:25:45.105321+03:00",
        "user": "640bb2ea-303b-4e08-84b1-a119db69e46e",
        "action_flag": 1,
        "change_message": "Пользователь 1"
    },
    {
        "action_time": "2020-03-19T15:53:50.135568+03:00",
        "user": "640bb2ea-303b-4e08-84b1-a119db69e46e",
        "action_flag": 2,
        "change_message": "Проект был изменён"
    },
    {
        "action_time": "2020-03-19T15:53:50.131651+03:00",
        "user": "640bb2ea-303b-4e08-84b1-a119db69e46e",
        "action_flag": 2,
        "change_message": "Пользователь изменил задание "
    },
    {
        "action_time": "2020-03-19T15:53:42.343760+03:00",
        "user": "640bb2ea-303b-4e08-84b1-a119db69e46e",
        "action_flag": 2,
        "change_message": "Проект был изменён пользователем"
    }
]

}


Ответы (0 шт):