Как форматировать список до дате рождения?

Прошу прощения, если вопрос оказался не понятен.

У меня работает связка Laravel + VUE
Laravel jnlftn JSON:

{
      "id": 1,
      "last_name": "Иванов",
      "first_name": "Иван",
      "middle_name": "Иванович",
      "birthdate": "1983-01-01",
      "mobile": "",
      "email": ""
    }

Я эти данные получаю, и визуализирую...
Но они у меня просто идут друг за другом, по алфавиту.
А я хочу сделать разделение по месяцам.
А т.к. я пока с этим только начинают работать, пока не очень понял как это сделать.
Вроде как надо просто при "рисовании каждой строки" смотреть на месяц в дате и разделить весь список на 12 частей.

Вроде как надо просто при "рисовании каждой строки" смотреть на месяц в дате и разделить весь список на 12 частей.

wertex, лучше заранее подготовить данные к "рисованию" использовав map/reduce
Пример - https://codepen.io/kleinmaximus/pen/jepaJR

Klein Maximus, ваш пример работает... но как... я так и не понял (
И как его привязать к axios ?
попробовал просто заменить поток входящих данных https://codepen.io/wertex/pen/yRxePY
возникает ошибка про Error in render: "TypeError: Cannot read property 'map' of null" получается в response.data не совсем массив?

wertex, во первых, в codepen не будут работать однофайловые компоненты.
Во вторых, вполне возможно, что перед .map стоит проверить саму переменную/константу на наличие значения ;)

Мое решение построено на map/reduce. Сперва я отсортировал весь массив по дате, предварительно сконвертировав строковое представление в дату (sorted), после этого сформировал новый объект (reduced), в котором ключами выступают порядковые номера месяцев (с 0, т .к. getMonth() возвращает диапазон с 0 по 11), а внутри находятся соответствующие данным месяцам записи.
Все это сделано в computed, так что реактивность есть.

Klein Maximus, в том то и дело, что данные есть. Если использовать console.log(this.peoples) то в консоль попадает массив из 80 объектов...

Не факт, что данные есть. Что выводит console.log(JSON.stringify(this.peoples))? - это точно покажет, есть данные или нет.
Консоль может и соврать, поскольку она синхронная, а axios делает запрос асинхронно.

Klein Maximus, Собственно тоже самое если я пишу

<template>
    <div>
        {{ peoples }}
    </div>
</template>

{ "id": 21, "last_name": "Иванов21", "first_name": "Иван21", "middle_name": "Иванович21", "birthdate": "1981-11-12", "mobile": "", "email": "" },

wertex, еще раз.
У вас изначально peoples установлено в null.
В хуке beforeRouteEnter вы делаете запрос через getPeoples. Но по неизвестной мне причине, Вы используете коллбэки, а не промисы, соответственно и не дожидаетесь ответа перед передачей управления в компонент через next().
Из-за этого Ваш хук beforeRouteEnter отрабатывает СИНХРОННО! А внутри него запускается АСИНХРОННЫЙ запрос на получение данных, который ТРЕБУЕТ ВРЕМЕНИ, соответственно, данные с очень большой долей вероятности появятся уже ПОСЛЕ того, как компонент будет смонтирован, а до этого времени в peoples будет установлено значение null (в data).
Значит нужно либо в в шаблоне поставить <ul v-if="peoples">...</ul>, чтобы до получения данных из компонента дело даже не доходило, либо в sorted() сделать проверку на this.people перед map, что то типа:
return !this.people ? [] : this.peoples.map(/* */)

P.S.: Кстати, peoples означает не люди, а народный. У people есть только множественное число, поэтом суффикс s подставлять не надо.

Klein Maximus, пока это единственный работающий код для axios, который у меня точно есть. Если у вас будет желание исправить его, буду благодарен)
P.S.: people поправил, спасибо.
PS2: Может есть желание в скйп пообщаться или в телеграмм?

wertex, поставьте проверку в шаблоне <ul v-if="people">...</ul> и ошибка должна пропасть

Klein Maximus,
Попробовал...
Теперь новые ошибки :(
Property or method "months" is not defined on the instance but referenced during render.
"TypeError: Cannot read property '0' of undefined"
Поправил код, только вот вам его не проверить (

wertex, Вы уж меня извините, но мне кажется это уже либо наглость, либо троллинг :(

Я, ИМХО, уже очень много сделал для решения Вашей проблемы, пытался Вас направить по нужному "руслу", но, как я вижу, Вам хочется, чтобы данную проблему за Вас решил кто-то другой! Обидно :(

Советую очень подробно изучить учебник (хотя бы основные разделы), документацию по Vue (она на русском), и как можно чаще заглядывать сюда - вопросы отпадут сами собой.

P.S.: В ошибке же четко написано, что не так! Даже если английского не знаете, то есть же переводчики. Почему Вы в шаблон вставили months[key]? Разве months как-то определен в компоненте в data, в computed или, на худой конец, в методах?

Нет, это не троллинг . Честно.
Я просто взял ваш код и хотел дать ему данные, которые грузятся через запрос к API. months[key] был указан в вашем коде.
Все равно спасибо за помощь. Теперь мне больше стало понятно. Пойду дальше читать матчасть.
Еще раз извините.

Убрал months[key] теперь все отсортировано по дате рождения... осталось понять как вернуть разделение по месяцу.

wertex, добавьте в секцию computed: months() { return months; }, тогда months[key], можно будет использовать в шаблоне.

Теперь все работает!

А почему в вашем случае, когда есть локальный список данных, months работало без добавления в computed, а в моем случае - ругается всякими не приличными ошибками?

wertex, в моем кода на codepen шаблон был в опциях (template), а не в отдельном блоке однофайлового компонента, поэтому данная переменная (точнее константа) просто "замкнулась" - она для компонента была глобальной.

Осталось сделать сортировку сначала по дню в месяце чтобы дни шли друг за другом)

Klein Maximus,

она для компонента была глобальной.

понял, спасибо за пояснение.

wertex, поменял в своем коде вычисляемое поле reduced, чтобы была сортировка по дню.