How to make a list with datemarks on Vue.js?

Question

Just have such a view:

<div class="items">
    <div class="datemark" data-date="1">Today</div>
    <div class="item" data-date="1">Item 1</div>
    <div class="item" data-date="1">Item 2</div>
    <div class="item" data-date="1">Item 3</div>

    <div class="datemark" data-date="2">Tommorow</div>
    <div class="item" data-date="2">Item 1</div>
    <div class="item" data-date="2">Item 2</div>
    <div class="item" data-date="2">Item 3</div>
</div>

with such data:

data = [
    1: {
        human: 'Today',
        date: 1,
        items: [
            item1: {
                name: 'test',
                date: 1 // possible here
            },
            item2: {...},
        ]
    },
    2: {
        human: 'Tommorow',
        date: 2,
        items: [
            item1: {...},
            item2: {...},
        ]
    }
]

or it can be:

data = [
    item1: {
        name: 'test',
        date: 1 // possible here
    },
    item2: {
        name: 'other',
        date: 2 // possible here
    },
    ...
]

How to make it works and can be sorted desc/asc by datemarks and 'inside' datemarks range if it have different hours and minutes also?

Tried v-for but only simple lists, how with datemarks?

Thanks!

Answer 1

You don't have to do it like this, use a computed property instead, and you can see I used slice , it's because I want to copy the array instead of sorting the elements in place:

 const app = new Vue({ el: '#app', data: { order: 'ASC', list: [ { name: 'item1', date: 1 // possible here }, { name: 'item2', date: 2 // possible here }, { name: 'item3', date: 3 // possible here }, { name: 'test', date: 4 // possible here }, { name: 'other', date: 5 // possible here } ] }, computed: { sortedList() { return this.list.slice(0) .sort((a, b) => { if (this.order === 'ASC') { return b.date - a.date; } return a.date - b.date; }) } }, methods: { toggleSort(type){ this.order = type; } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <div> <button v-on:click="toggleSort('ASC')">ASC</button> <button v-on:click="toggleSort('DSC')">DSC</button> </div> <div> <div class="datemark" v-for="item in sortedList"> <div class="item">{{item.name}}</div> </div> </div> </div> 

And for your reference, if you're actually doing comparison on real dates, use this instead"

array.sort(function(a,b){
  // Turn your strings into dates, and then subtract them
  // to get a value that is either negative, positive, or zero.
  return new Date(b.date) - new Date(a.date);
});