Как на Vue.js сделать вывод дополнительного списка при нажатии определенного пункта существующего списка в другом компоненте?

Question

[rokerok_n]

Хочу сделать вывод списка задач создаваемого пользователем при нажатии на пункт меню создаваемый с помощью v-for внутри другого циклического списка групп, отображение списка задач происходит в другом компоненте. Итемы во все списки добавляются пользователем. Пытался сделать двойную вложенность массивов с помощью текущих ключей итерации, вроде значения сохраняются но криво, отображаются только после нажатия на другую группу и при повторном нажатии на соответствующий пункт меню не выводятся в правом компоненте. Все слишком громоздко, ступор. Может структурно что-то изменить? Как то проще можно сделать чтоб список добавленных задач был привязан к определенному пункту меню и выводился при каждом нажатии на него?
Вот упрощенный код: https://jsfiddle.net/rokerok_22/vnvvpg9a/1/

Answer 1

[0xD34F]

Все слишком громоздко, ступор.

А знаете почему? Причина номер раз - козлиные имена переменных, свойств объектов и т.д. Например, если у вас в группах содержатся проекты, то и назвали бы соответствующее свойство projects, а не arr. В проектах содержатся задачи - ну так пусть их список называется tasks, а не arr. А так у вас два разных arr - и ни про один сходу не скажешь, что это такое. Уже достаточно, чтобы запутаться.

Выбранные группа/проект - вместо индексов лучше хранить ссылку на сам объект, в случае проекта его же и передавать в компонент - так будет доступен список уже существующих задач и ваша проблема с их выводом решится сама собой.

При добавлении новых задач перетираете их список - зачем?

Немного подправил ваш код, типа вот. Похоже на то, к чему вы стремились?

Comments

[rokerok_n]

Вы правы, буду исправляться! Спасибо большое за помощь!

Answer 2

[levchak0910]

Причина номер раз - козлиные имена переменных, свойств объектов и т.д.

Лютый плюс.
pr_title ? taskname ? showPro ?
Eще вариант, без компонента.

Comments

[rokerok_n]

Спасибо!