Javascript 为每3项Vue.js创建新行

基本上代码工作正常，但我无法更改元素的顺序
目前的结果如下所示：

<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);
    },
  },

但实际上我希望它是这样的：

<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);
    },
  },

我的代码如下所示：

<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);
    },
  },

{{item.title}
{{item.text}
计算：{
chunkedItems（）{
返回此.$\u.chunk（this.stories，3）；
},
},

---

任何建议都将不胜感激。

请删除该块并使用

：span=“8”

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

{{item.title}
{{item.text}
计算：{
},

也许可以通过CSS

el容器{display:flex；flex direction:row；}

来完成。非常感谢。显然，我对

span

属性理解得不太透彻。np，3/24=8，如果您想要像您的示例那样的奇怪col，请使用modulo

：span=“index%2==0？12:3”v-for=“（项目，索引）in stories”