仅在未设置标题时才添加标题答案

【问题标题】：Adding a headline only if none is set already仅在未设置标题时才添加标题
【发布时间】：2019-09-09 10:06:03
【问题描述】：

我需要在显示日期的列表中添加标题。它有效，但前提是没有多个日期相同。每个日期标题只能显示一次。

示例 - 当前问题：

01.02.2019
- XY
05.03.2019
- ABC
05.03.2019
- DEF
05.03.2019
- FOO

应该是这样的：

01.02.2019
- XY
05.03.2019
- ABC
- DEF
- FOO

这是我用来检查今天日期的代码：

HTML:
<template v-for="(meetup, index) in filteredItems">
    <v-subheader v-if="checkIsToday(meetup.date)" inset>
        <span v-if="todaySubheader === false">TODAY</span>
    </v-subheader>

JS：

data() {
        return {
            todaySubheader: false,
            [...]
            checkIsToday(val) {
                if (val && this.todaySubheader === false) {
                    this.todaySubheader = true
                }
                return isToday(new Date(val))
            },

如何避免在已设置标题后添加第二个标题？

（我正在使用带有 Vuetify 框架的 VueJS）

【问题讨论】：

你能提供你的真实代码或演示吗？因为这不会显示任何东西

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

你没有提供完整的代码，所以我不知道你的对象是什么样子的。

一种可能的解决方案是在 Vue Computed 函数中按日期对项目进行分组。

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;
  }, {});

const items = [
  { name: 'XY', date: '01.02.2019' },
  { name: 'DEF', date: '05.03.2019' },
  { name: 'ABC', date: '05.03.2019' },
  { name: 'FOO', date: '05.03.2019' }
];

const groupByDate = groupBy('date');

console.log(
  JSON.stringify(groupByDate(items), null, 2)
);

将此代码添加到计算的 Vue 函数中： Vue computed documentation

【讨论】：