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，但我不确定您的确切输出要求是什么。