Group messages by date

I’m trying to group message by date.
The last date is well marked.
My problem is that Today’s date is not shown.

Here is [jsfiddle] Code I referenced.

HTML
<div class="chat-content-form" ref="chatList">
        <div v-for="(chat, index) in getChatList">
          <chatDate v-html="groupByDate(chat.createdAt)"/>
        </div>
      </div>
method
groupByDate(date) {
      const year = new Date(date).getFullYear();
      const day = (`0${new Date(date).getDate()}`).slice(-2);
      const month = (`0${new Date(date).getMonth() + 1}`).slice(-2);
      const date_data = `${year}.${month}.${day}`;
      if (this.old_unique_date === date_data) {
        return "";
      }
      let result = '';
      result += `<div class="chat-date text-center relative-position">`;
      result += `<span class="line inline-b"></span>`;
      result += `<span class="inline-b bg-white txt-13 text-grey-6 pd-5 absolute-center">`;
      // eslint-disable-next-line no-multi-assign,no-return-assign
      result += this.old_unique_date = date_data;
      result += `</span>`;
      result += `</div>`;
      // eslint-disable-next-line no-multi-assign,no-return-assign
      return result;
    },

Any help is appreciated!

The JSFiddle seems to be an old example that isn’t particularly similar to the code in your post.

I wouldn’t try to build up HTML in a method if I were you. Avoid v-html and build HTML inside the template.

Assigning the date to old_unique_date during the rendering loop is going to be problematic. Rendering should be stateless, so nothing should be assigned to this during rendering.

Instead, try building a suitable data structure in a computed property, derived from the array of messages. Such a data structure should include the grouping information rather than trying to derive it during rendering.

I’m unclear what you mean by ‘My problem is that Today’s date is not shown.’.