Vue.jsでは配列などのデータをリストのようにレンダリングするときに使う「v-for」というディレクティブがあります。過去記事「Vue.jsでテンプレート内にv-forで配列データを展開する」でも紹介していましたが、配列データ数の分だけループさせるので全てのデータが出力される形になります。そこで今回は配列を扱うケースにおいて、指定の回数で限定させてループさせる方法をまとめていきたいと思います。   まず、その前にv-forでは整数値を入れることで範囲指定も可能になります。特定のデータを扱わず指定回数だけ繰り返したいときはこのような形で出力することができます。 【Vue】

<template>
　<div id="app">
　　<ul v-for="n of 8" :key="n">
　　　<li>{{ n }}
　　　</li>
　　</ul>
　</div>
</template>

  そして今回のテーマでもありますが、配列をv-forでループさせる場合には、整数値を入れる訳にはいきません。そこで、computedで配列データを指定の回数になるようフィルタリングしておきます。実際のコードは下記のような例になります。 【Vue】

<template>
　<div id="app">
　　<ul v-for="member of limitCount" :key="member.name">
　　　<li>{{ member.name }}：{{ member.age}}
　　　</li>
　　</ul>
　</div>
</template>

<script>
　export default {
　　data: function() {
　　　return {
　　　　members: [
　　　　　{ name: '山田', age: '34歳' },
　　　　　{ name: '田中', age: '45歳' }, 
　　　　　{ name: '中村', age: '29歳' },
　　　　　{ name: '村井', age: '38歳' },
　　　　　{ name: '井上', age: '28歳' },
　　　　　{ name: '上野', age: '33歳' }
　　　　]
　　　}
　　},
　　computed: {
　　　limitCount() {
　　　　return this.members.slice(0,4)
　　　}
　　}
　}
</script>

  ここでは、slice()で配列のデータを切り取っています。算出されたデータを返していますので、computedにある関数をv-forで使うことでフィルタリングされたデータを出力することができます。今回は指定した回数という形での出力でしたが、それ以外にも特定の条件を満たすデータのみ出力させるなども勿論可能です。基本的にはデータを事前に算出しておくことがポイントになります。  

---

  いかがでしょうか、使いどころの例としてはアーカイブ記事などの抜粋を表示させるときに、件数を指定する場合などでしょうか。その他にもサイト制作には使えるシーンもありそうですね。   （参考にさせて頂いたサイト） リストレンダリング — Vue.js