在Vue中筛选和排序对象数组

Question

我试图在Vue中创建一个过滤和排序的计算程序，它基于一个对象数组，但是还没有弄清楚如何让它工作。该项目可以访问vue-filter库。

以下是相关的代码片段：

在脚本标签上-

export default {
    computed: {
        filteredOfficialScenarios() {
            return [
                {"scenarioName": "scenario 1", "created": "2020-01-01T10:30:00"},
                {"scenarioName": "scenario 2", "created": "2019-01-01T09:15:00"},
                {"scenarioName": "scenario 3", "created": "2020-01-15T11:00:00"},
                {"scenarioName": "scenario 4", "created": "2018-01-31T11:00:00"},
                {"scenarioName": "scenario 5", "created": "2019-01-31T11:00:00"}
            ];
        }
    }
}

在HTML中-

<ul>
    <li v-for="officialScenario in filteredOfficialScenarios" v-bind:key="officialScenario.scenarioName">{{officialScenario}}</li>
</ul>

只有创建的> 2019-01-01的场景应该在最终的输出中，并且最终的输出将按照降序创建日期进行排序。

我试着把分类和过滤分开处理，但也没有成功，更别说弄清楚如何将它们结合在一起了。以下是我们尝试过的，但没有结果-

为了分类-

computed: {
    filteredOfficialScenarios() {
        return [
            {"scenarioName": "scenario 1", "created": "2020-01-01T10:30:00"},
            {"scenarioName": "scenario 2", "created": "2019-01-01T09:15:00"},
            {"scenarioName": "scenario 3", "created": "2020-01-15T11:00:00"},
            {"scenarioName": "scenario 4", "created": "2018-01-31T11:00:00"},
            {"scenarioName": "scenario 5", "created": "2019-01-31T11:00:00"}
        ] | sortBy("created");
    }
}

这是试图让它做一个简单的排序，而不关心排序方向。这会导致控制台错误，浏览器中应用程序页面上的所有输出都会消失。

为了过滤-

computed: {
    filteredOfficialScenarios() {
        return [
            {"scenarioName": "scenario 1", "created": "2020-01-01T10:30:00"},
            {"scenarioName": "scenario 2", "created": "2019-01-01T09:15:00"},
            {"scenarioName": "scenario 3", "created": "2020-01-15T11:00:00"},
            {"scenarioName": "scenario 4", "created": "2018-01-31T11:00:00"},
            {"scenarioName": "scenario 5", "created": "2019-01-31T11:00:00"}
        ] | filter(function (scenario) { return scenario.created > "2019-01-01"} );
    }
}

这会导致控制台错误，浏览器中应用程序页面上的所有输出都会消失。

是否有办法进行排序和过滤，并使它们同时工作？

Answer 1

您可以将过滤器和排序应用到最初的方案列表中。下面是一个例子：

<template>
  <ul>
    <li v-for="officialScenario in filteredOfficialScenarios" :key="officialScenario.scenarioName">
      <span>{{ officialScenario }}</span>
    </li>
  </ul>
</template>

const SCENARIOS = [
  { scenarioName: 'scenario 1', created: '2020-01-01T10:30:00' },
  { scenarioName: 'scenario 2', created: '2019-01-01T09:15:00' },
  { scenarioName: 'scenario 3', created: '2020-01-15T11:00:00' },
  { scenarioName: 'scenario 4', created: '2018-01-31T11:00:00' },
  { scenarioName: 'scenario 5', created: '2019-01-31T11:00:00' },
];

const START_DATE = new Date('2019-01-01');

export default {
  computed: {
    filteredOfficialScenarios() {
      return SCENARIOS
        .filter(s => new Date(s.created) >= START_DATE)
        .sort((a, b) => new Date(a.created) - new Date(b.created)
      );
    },
  },
};

如果需要以相反的方式排序列表，只需将(a, b)与(b, a)交换即可。

如果要将场景修改为拥有Date对象而不是字符串，那么代码就会更简单一些，但我不确定具体的输出要求是什么。