Create new row for every 3 items Vue.js

Question

Basically the code works fine but I am not able to change the order of the elements.
At the moment the result looks like this:

But actually I would like it like this:

My code Looks like this:

<template>
  <div class="home">
    <el-container>
      <el-row v-for="story of chunkedItems" :key="story.id">
        <el-col v-for="item of story" :key="item.id">
          <el-card>
            <div>{{ item.title }}</div>
            <div>{{ item.text }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

computed: {
    chunkedItems() {
      return this.$_.chunk(this.stories, 3);
    },
  },

Any suggestion is appreciated.

Maybe it can be done by CSS el-container { display: flex; flex-direction: row; } — Kostas
– Kostas, Commented Jan 9, 2021 at 11:51

Lawrence Cherone · Accepted Answer · 2021-01-09 11:54:13Z

3

Remove the chunk and use :span="8" instead.

<template>
  <div class="home">
    <el-container>
      <el-row>
        <el-col :span="8" v-for="item of stories" :key="item.id">
          <el-card>
            <div>{{ item.title }}</div>
            <div>{{ item.text }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

computed: {
},

answered Jan 9, 2021 at 11:54

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ronaldo Over a year ago

Worked like a charm. Thank you! Obviously I did not understand the span attribute too well.

Lawrence Cherone Over a year ago

np, is in the docs 3/24 = 8, if you want weird cols like your example use modulo :span="index % 2 == 0 ? 12:3" v-for="(item, index) in stories"

Collectives™ on Stack Overflow

Create new row for every 3 items Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related