twitter-bootstrap vuejs v-for 每 5 个项目添加引导行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41924476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vuejs v-for add bootstrap row every 5 items
提问by herrjeh42
I have an array of items like 'Item 1', 'Item 2' up to 'Item 25'. I want the HTML after rendering look like this:
我有一系列项目，例如“项目 1”、“项目 2”到“项目 25”。我希望渲染后的 HTML 如下所示：
<div class="row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<div class="row">
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
What is the proper way to express this in vue.js?
在 vue.js 中表达这一点的正确方法是什么？
<div class="row">
<span v-for="(item, index) in items">
// do something like this in vue.js style:
// if (item % 5 == 0) print "</div><div class='row'>"
<app-field >{{ item }}</app-field>
</span>
</div>
采纳答案by Joel
Or you can do the same using lodash _.chunk(), which personally I find more readable.
或者你可以使用 做同样的事情lodash _.chunk()，我个人觉得它更具可读性。
Template:
模板：
<div class="columns" v-for="chunk in productChunks">
<div class="column is-one-quarter" v-for="product in chunk">
// stuff
</div>
</div>
Then
然后
computed: {
productChunks(){
return _.chunk(Object.values(this.products), 4);
}
},
Personally I import lodash globally as I use it so often, in main.js:
我个人在 main.js 中全局导入 lodash，因为我经常使用它：
import _ from 'lodash'
Remember to 'npm install --save lodash'
记得' npm install --save lodash'
回答by CD..
You can try this:
你可以试试这个：
<div class="row" v-for="i in Math.ceil(items.length / 5)">
<span v-for="item in items.slice((i - 1) * 5, i * 5)">
{{item}}
</span>
</div>
See a working example:
查看一个工作示例：
new Vue({
el: '#demo',
data: {
items: [
'item 1',
'item 2',
'item 3',
'item 4',
'item 5',
'item 6',
'item 7',
'item 8',
'item 9',
'item 10',
'item 11',
'item 12',
'item 13',
'item 14',
'item 15',
'item 16',
'item 17',
'item 18',
'item 19',
'item 20',
'item 21',
'item 22',
'item 23',
'item 24',
'item 25'
]
}
}).row {
border: solid 1px #404040;
padding: 10px;
}<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<div class="row" v-for="i in Math.ceil(items.length / 5)">
<span v-for="item in items.slice((i - 1) * 5, i * 5)">
{{item}}
</span>
</div>
</div>回答by Cristi Jora
In addition to the example above which I think is fine, I would define the calculations as computed properties and methods for more readable code. See the JSFiddle:
除了上面我认为很好的示例之外，我会将计算定义为计算属性和方法，以获得更易读的代码。请参阅JSFiddle：
computed:{
rowCount() {
return Math.ceil(this.items.length / this.itemsPerRow);
}
},
回答by javed
A little improved answer, With npm install --save lodash.
稍微改进的答案， With npm install --save lodash。
<template>
<div class="content">
<div class="row" v-for="chunk in productChunks">
<product-thumbnail :product="sp" v-for="sp in chunk" class="col-4"></product-thumbnail>
</div>
</div>
</template>
import lodash from 'lodash';
export default {
name: "ProductList",
components: {
"product-thumbnail": ProductThumbnail
},
data() {
return {
sps: [],
itemsPerRow: 4
}
},
async mounted() {
let resp = await;
//call api
this.sps = results;
},
computed: {
productChunks() {
return lodash.chunk(Object.values(this.sps), this.itemsPerRow);
}
}
}
回答by Prince Owen
If you're simply creating placeholders/slots for content that you'll probably render later using position: relative, you can create them like this:
如果您只是为稍后可能会使用 呈现的内容创建占位符/插槽position: relative，您可以像这样创建它们：
<template>
<div class="col q-gutter-y-xs">
<div class="row q-gutter-x-xs" v-for="row in rows" :key="row">
<div class="col slot text-white" v-for="col in columns" :key="col">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 7,
columns: 7
}
}
}
</script>
<style>
.slot {
background: #444;
border-radius: 8px;
border: 1px #2e2d28 solid;
}
</style>
