CODEWITHSUNDEEP
javascriptvue.jselement-ui
Ronaldo
Ronaldo

Reputation: 774

Create new row for every 3 items Vue.js

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:

enter image description here

But actually I would like it like this:

enter image description here

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.

Upvotes: 3

Views: 1403

Answers (1)

Lawrence Cherone
Lawrence Cherone

Reputation: 46650

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: {
},

Upvotes: 3

Related Questions