vue 集合按月份分组

假设你有一个包含日期的数组，你可以使用 Vue.js 中的 computed 属性和 JavaScript 中的 reduce() 方法来按月份对集合进行分组。以下是一个示例代码：

computed: {
  groupedItems() {
    const items = this.items.slice(); // 复制一个新的数组，避免修改原数组
    const groups = items.reduce((result, item) => {
      const date = new Date(item.date);
      const month = date.getMonth() + 1;
      const year = date.getFullYear();
      const key = `${year}-${month}`;

      if (!result[key]) {
        result[key] = [];
      }

      result[key].push(item);
      return result;
    }, {});

    return Object.entries(groups).map(([key, value]) => ({
      month: key,
      items: value
    }));
  }
}

在上面的代码中，我们首先复制了一份原始数组以避免修改原始数据。然后我们使用 reduce() 方法来遍历数组并将每个元素添加到相应的月份组中。

最后，我们将结果转换为一个数组，其中每个元素都包含一个月份和该月份的所有项目。你可以将这个 computed 属性绑定到你的模板中，以显示按月份分组的数据。