@Max89

Как представить json для генерации такого списка через v-for?

Как должен выглядеть json для генерации такого вложенного списка через v-for?

<ul>
    <li>Одежда и легкая промышленность
        <ul>
            <li>
                Одежда и аксессуары
                <ul>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                </ul>
            </li>
               <li>
                Одежда и аксессуары
                <ul>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Одежда и легкая промышленность
        <ul>
            <li>
                Одежда и аксессуары
                <ul>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                </ul>
            </li>
               <li>
                Одежда и аксессуары
                <ul>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                    <li>Спортивная одежда</li>
                </ul>
            </li>
        </ul>
    </li>
 </ul>
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Как должен выглядеть json...

Примерно так

[
  {
    title: '...',
    children: [
      {
        title: '...',
        children: [
          {
            title: '...',
          },
          ...
        ],
      },
      ...
    ],
  },
  ...
]


...для генерации такого вложенного списка через v-for?

Одного только v-for недостаточно, нужен рекурсивный компонент

name: 'v-tree',
props: [ 'items' ],

<ul v-if="Array.isArray(items) && items.length">
  <li v-for="n in items">
    {{ n.title }}
    <v-tree :items="n.children" />
  </li>
</ul>

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы