基本上代码工作正常,但我无法更改元素的顺序。
目前的结果是这样的:
但实际上我喜欢这样:
我的代码是这样的:
<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);
},
},
如有任何建议,我们将不胜感激。
最佳答案
删除 block 并使用 :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: {
},
关于javascript - 为每 3 个项目创建一个新行 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65642247/