使用下拉选择选项按日期对列表进行排序

Question

我是 Vue.js 的新手，并尝试将其作为附加组件逐步添加到我的项目中，主要用于数据绑定。因此，我在页脚中调用 Vue.js 脚本并使用 main.js 文件来包含我的 Vue 脚本。

我正在尝试使用提供日期范围的下拉选择选项按日期对数据列表进行排序。到目前为止，我还没有在网上找到任何可以帮助我实现目标的教程。谁能带领我朝着正确的方向前进？

<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: {
        ???
    }
});

谢谢！

Answer 1

所以有一个例子（下面）它是如何工作的。它只需要一个computed 属性即可按所选日期范围过滤数据。我还在您的示例中更改了一些日期以显示过滤工作。

（如果您打算使用日期，我推荐 momentjs 库，它可以更轻松地使用日期（解析、操作）。）

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>