Vue.jsで配列を指定した回数だけループさせる
Monohibiでは関連記事をタグで判定して表示しています。その場合、タグによっては表示される記事が多かったりするので、指定した数だけ記事を表示させる方法です。
方法
computed
で記事データが入っている配列を、指定回数分の数にフィルタリングしてからループさせます。
<div id="app">
<ul>
<li
v-for="relatedPost of relatedPostsCount"
:key="relatedPost.title"
>
{{ relatedPost.title }}:{{ relatedPost.body }}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
relatedPosts: [
{ title: '記事1', body: '記事1の本文' },
{ title: '記事2', body: '記事2の本文' },
{ title: '記事3', body: '記事3の本文' },
{ title: '記事4', body: '記事4の本文' },
{ title: '記事5', body: '記事5の本文' },
{ title: '記事6', body: '記事6の本文' }
]
},
computed: {
relatedPostsCount (){
return this.relatedPosts.slice(0, 4)
}
}
})
</script>
computed
で記事データの配列をslice()
で必要な記事データの数の配列に切り取る。- 算出された配列を
v-for
にセットしてループさせる。