Доброй ночи.
Задача: отрендерить дерево категорий с визуальным отображением вложенности, да еще и внутри селекта. Верхние категории должны обозначать группы категорий. Плевая, по сути, задачка, но вот на Vue я задумался.
Директивы v-if и v-for сами по себе не гибки. Как, например, учесть бесконечную вложенность? Как сделать рекурсию? А как, например, рендерить обертки над option'ами верхних категорий (в компоненте material ui группа является отдельным типом компонента, внутрь которой вкладываются дочерние options)?
- category
-- category 2
--- category 3
-- category 4
- category 5
Одним из решений видится JSX, который дает нужную гибкость. Но у меня single-file components, и получается, что придется некоторые компоненты делать иначе, отходя от заданного код-стайла, чего не хочется.
В общем, как это можно сделать во Vue?
Заранее спасибо.