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>

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

1 个答案: