Including a heading if one has not already been established

Question

Including a heading if one has not already been established

Looking for a way to display date headlines in a list without duplicating them when multiple dates are the same.

For example, currently:

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

Desired output:

01.02.2019
- XY
05.03.2019
- ABC
- DEF
- FOO

Here's the code snippet I'm using to check if the date is today:

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>

Javascript:

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

Any suggestions on preventing the addition of a second headline after one has already been set?

(Using VueJS with Vuetify framework)

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

Your code snippet is missing the full context, making it difficult to understand how your Objects are structured.

A potential solution could involve utilizing a Vue Computed function to group items by date.

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)
);

Consider implementing this code within a computed Vue Function: Vue computed documentation

Answer 2

Your code snippet is missing the full context, making it difficult to understand how your Objects are structured.

A potential solution could involve utilizing a Vue Computed function to group items by date.

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)
);

Consider implementing this code within a computed Vue Function: Vue computed documentation

Including a heading if one has not already been established

Answer №1

Similar questions

Troubles encountered during the installation of Visual Web Developer 2010?

The Ionic framework lacks support for the firebase and auth properties found in Firebase

Refresh the DIV content using an external file

Learn how to showcase a modal pop-up in AngularJS by utilizing the ng-if directive

What could be causing my dropdown links to malfunction on the desktop version?

Simulated asynchronous operation in Pinia

Approximately 20% of spoken words are not accurately conveyed by Speech Synthesis Google Voices, failing to adhere to the intended voice selection

A guide on implementing nested view objects in ui-router for angular applications

Utilizing shared code amongst React components

Guide to integrating a custom-designed email subscription form into a Node JS application

Initiate node.js execution upon system boot

npm ERROR! The module './access-error.js' could not be located

Guide on incorporating dynamic markers into MapBox using Vue/Nuxt

What are some effective ways to utilize customvalidator for performing clientside validation on two input fields?

Implementing JavaScript SDK to modify a Parse object upon a button click: A Step-by-Step Guide

Guide on parsing a JavaScript file and converting the default export module to JSON with Node.js

Fetching server-side JavaScript source from a relative path within an ASP file

Having trouble converting a string to an array in JS? Splitting doesn't seem to be doing

Update all other input fields whenever a single field is modified. Implement using AngularJS (Link to Plunker included)

How to customize nouislider appearance using Bootstrap styles