Как правильно разбить карточки на ряды и колонки при v-for?

Question

У меня есть примерна такая структура, т.е я прохожусь циклом v-for по массиву в котором большое кол-во элементов, к примеру 20. Мне нужно как-то сделать чтоб в одном ряду было 4 колонки, на следующие 4 элемента новый ряд в котором 4 колони. Проблема в том что в существуещей структуре получается 1 ряд и 20 колонок, которые идут друг под другом. Если же перенести цикл на елемент el-row, то будет 20 рядов с 1 колонкой. Подскажите, как все такие используя v-for сделать вышеописанную реализацию?

Нужно это по причине того, что у меня акордеон на карточках и при его открытии все элементы съезжают, так как они находятся в одном ряду. Если же сделать в отдельных рядах все корректно работает (проверял)

<el-row :gutter="10">
  <el-col :span="6" v-for="(item, index) in pagedRecept()" :key="index">
    <div class="recipe-card">
      <img v-if="item.recipe.image" class="recipe-card__img" :src="item.recipe.image" и т.д[![введите сюда описание изображения][1]][1]/>

Answer 1

Нужно сделать вычисляемое выражение, которое будет разбивать список на строки. Примерно так:

computed: {
    rows: function () {
        var row = [];
        var rows = [];
        var recepts = this.pagedRecept();
        for (var r in recepts) {
            row.push(recepts[r]);
            if (row.length === 4) {
                rows.push(row);
                row = [];
            }
        }
        if (row.length > 0) {
            rows.push(row);
        }
        return rows;
    }
}

А дальше уже работать с ними

<el-row :gutter="10" v-for="(row, r) in rows">
  <el-col :span="6" v-for="(item, index) in row" :key="index+r*4">
    <div class="recipe-card">
      <img v-if="item.recipe.image" class="recipe-card__img" :src="item.recipe.image" и т.д[![введите сюда описание изображения][1]][1]/>

БЛОГ НА HUSL

Как правильно разбить карточки на ряды и колонки при v-for?

Ответы (1 шт):