Use drop down select option to sort list by date

Question

I am new to Vue.js and trying to add it to my project incrementally as an add-on, mostly for data binding. Thus, I am calling the Vue.js script in my footer and using a main.js file to contain my Vue scripts.

I am trying to sort a data list by date using a drop down select option that gives date ranges. So far I have not been able to find any tutorials online that can get me to my goal. Can anyone lead me in the right direction?

<div id="date-range">
    <h3>Activity Overview</h3>
    <select id="selected" class="activity-overview__select" v-model="selected">
        <option value="24hr">Past 24 Hours</option>
        <option value="7days">Past 7 Days</option>
        <option value="14days">Past 14 Days</option>
    </select>
    <ul>
        <li>{{ selected.id }}{{ selected.text }}{{ selected.date }}</li>
    </ul>
</div>

var incidentCount = new Vue({
    el: '#incidentCountID',
    data: {
        incidentList: [
        { id: 0, text: 'Run', date: '2018-07-11' },
        { id: 1, text: 'Jump', date: '2018-07-10' },
        { id: 2, text: 'Skip', date: '2018-07-06' },
        { id: 3, text: 'Dance', date: '2018-07-05' },
        { id: 4, text: 'Swing', date: '2018-07-01' },
        { id: 5, text: 'Hop', date: '2018-05-29' },
        { id: 6, text: 'Bounce', date: '2018-06-29' },
        { id: 7, text: 'Crawl', date: '2018-06-27' },
        { id: 8, text: 'Walk', date: '2018-06-26' },
        { id: 9, text: 'Spin', date: '2018-06-25' },
        { id: 10, text: 'Skate', date: '2018-06-07' },
        { id: 11, text: 'Hike', date: '2018-06-05' }
      ]
    },
    methods: {
        ???
    }
});

Thank you!

Answer 1

So there is the example (below) how it can work. It needs just one computed property to filter data by selecte date range. I am also changed some dates in your example to show filtering works.

(If you plan to work with dates I recommend momentjs library which make working with dates(parsing, operations) much easier.)

var filterTypes = {
   Days: 0,
   Hours: 1
}

var incidentCount = new Vue({
    el: '#app',
    data: {
        incidentList: [
        { id: 0, text: 'Run', date: '2018-07-19' },
        { id: 1, text: 'Jump', date: '2018-07-17' },
        { id: 2, text: 'Skip', date: '2018-07-11' },
        { id: 3, text: 'Dance', date: '2018-07-06' },
        { id: 4, text: 'Swing', date: '2018-07-01' },
        { id: 5, text: 'Hop', date: '2018-05-29' },
        { id: 6, text: 'Bounce', date: '2018-06-29' },
        { id: 7, text: 'Crawl', date: '2018-06-27' },
        { id: 8, text: 'Walk', date: '2018-06-26' },
        { id: 9, text: 'Spin', date: '2018-06-25' },
        { id: 10, text: 'Skate', date: '2018-06-07' },
        { id: 11, text: 'Hike', date: '2018-06-05' }
      ],
      filters: [
        {
           value: 24,
           type: filterTypes.Hours,
           title: 'Past 24 Hours'
        },
        {
           value: 7,
           type: filterTypes.Days,
           title: 'Past 7 Days'
        },
        {
           value: 14,
           type: filterTypes.Days,
           title: 'Past 14 Days'
        }
      ],
      selectedFilter: ''
    },
    computed: {
        filteredList() {
            if (!this.selectedFilter) {
                return this.incidentList;
            }
            let multiplier, date;
            switch(this.selectedFilter.type) {
               // one hour milliseconds
               case filterTypes.Hours: 
                   multiplier = 60 * 60 * 1000; break;
               // one day milliseconds
               case filterTypes.Days: 
                   multiplier = 60 * 60 * 1000 * 24; break;
            }
            date =  Date.now() - this.selectedFilter.value * multiplier;
            return this.incidentList.filter((item) => Date.parse(item.date) >= date);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div id="date-range">
    <h3>Activity Overview</h3>
    <select class="activity-overview__select" v-model="selectedFilter">
        <option value="">All</option>
        <option v-for="f in filters" :value="f">{{ f.title }}</option>
    </select>
    <ul>
        <li v-for="incident in filteredList" :key="incident.id">
            {{ incident.id }} {{ incident.text }} {{ incident.date }}
        </li>
    </ul>
</div>
</div>