Как отсортировать по дате используя 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": "Проект был изменён пользователем"
}
]
}