Как во Vue отрендерить вложенные структуры с неизвестной вложенностью?

Доброй ночи.
Задача: отрендерить дерево категорий с визуальным отображением вложенности, да еще и внутри селекта. Верхние категории должны обозначать группы категорий. Плевая, по сути, задачка, но вот на Vue я задумался.

Директивы v-if и v-for сами по себе не гибки. Как, например, учесть бесконечную вложенность? Как сделать рекурсию? А как, например, рендерить обертки над option'ами верхних категорий (в компоненте material ui группа является отдельным типом компонента, внутрь которой вкладываются дочерние options)?
- category
-- category 2
--- category 3
-- category 4
- category 5


Одним из решений видится JSX, который дает нужную гибкость. Но у меня single-file components, и получается, что придется некоторые компоненты делать иначе, отходя от заданного код-стайла, чего не хочется.

В общем, как это можно сделать во Vue?
Заранее спасибо.
  • Вопрос задан
  • 581 просмотр
Решения вопроса 1
single-file component может использовать сам себя, если у него указан name.

Подробнее тут - https://vuejs.org/v2/guide/components-edge-cases.h...
Дерево из доки - https://vuejs.org/v2/examples/tree-view.html
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы