Как правильно отрисовывать списки по 3 во vue js?

Question

[Алексей]

Добрый день.
Допустим у меня есть JSON с таким видом:

[
{
    "id": 1,
    "brand": "adidas",
},
{
    "id": 2,
    "brand": "nike",
},
{
    "id": 3,
    "brand": "puma",
},
]

И т.д.

Я хочу добиться такой отрисовки чтобы в каждой строке было по 3 отдельно отрисованных элемента и т.д. и так-же каждая строка отрисовывалась через v-for


Подскажите пожалуйста как добиться такого результата

Answer 1

[Алексей Ярков]

Просто разбиваем массив на чанки по 3 элемента и выводим. Как угодно разбиваем, хотя бы так.

Answer 2

[Дмитрий Кузнецов]

уберите тег Vue, так как ваша проблема не является проблемой по VueJS.
Прочтите про flex'ы, grid'ы. Должно помочь.

Comments

[Алексей]

я понимаю что если я поставлю flex-wrap: wrap - то у меня будет перенос, вопрос не к этому.
Мне нужна отрисовка элементов по 3 в каждом отдельном компоненте ( В строке )

[Дмитрий Кузнецов]

SPART4K, учитесь гуглить: https://habr.com/ru/company/macloud/blog/564182/ (первая попавшиеся ссылка)

[Алексей]

Дмитрий Кузнецов, моя проблема никак к верстке не касается, еще раз повторю

[Дмитрий Кузнецов]

SPART4K, Она напрямую относится к вёрстке (CSS в частности). Vue только выводит эти данные, а html/css выводит так как нужно.
PS: ну если вам так принципиально нужно именно через js это делать, то вы можете каждые 3 поста переносить на отдельный div. но это тот ещё костыль.

[Алексей Ярков]

Дмитрий Кузнецов,

но это тот ещё костыль

А в чём костыль? Просто разбиваем массив на чанки по 3 элемента и выводим.

[Дмитрий Кузнецов]

Алексей Ярков, просто легче же сделать это всё через CSS, или я не прав?

[Алексей Ярков]

Дмитрий Кузнецов,

или я не прав

Ну задачи ведь разные бывают. Насчёт легче ну хз... По количеству строчек CSS и JS примерно одинаково ))

[Дмитрий Кузнецов]

Алексей Ярков, видимо мне подобные задачи легче решить через CSS.