Monohibiでは関連記事をタグで判定して表示しています。その場合、タグによっては表示される記事が多かったりするので、指定した数だけ記事を表示させる方法です。

Contents

方法

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>
  1. computedで記事データの配列をslice()で必要な記事データの数の配列に切り取る。
  2. 算出された配列をv-forにセットしてループさせる。

参考