今回はVue.jsのテンプレートにおいてデータを連携する場面などで必要となる、配列をループで展開して出力する方法についてまとめていきたいと思います。DBからデータをリクエストするときや外部のJSONデータを使う場合に書いていくことになります。Vue.js内で使うということもあり、ディレクティブなど独自の書き方を覚えていきます。   Vue.jsではテンプレート内でループ処理を行う場合には「v-for」ディレクティブというものを使います。これはJavaScriptでいうfor文の役割を果たします。扱うデータや出力したい形などでいろんな方法があります。  

配列形式のデータを展開してループで出力する

まずはベーシックでシンプルなケースです。テンプレートにはループさせる要素の親要素に「v-for」ディレクティブを追加します。値にはfor of文のように、「変数 of 対象の配列」の形で記述します。出力される子要素にはマスタッシュ構文の波括弧で「変数名.配列のキー名」を入れます。そしてdataオプションに実際のデータを配列の形で保持します。 【Vue】

<template>
 <div id="app">
  <ul v-for="item of items" v-bind:key="item.name">
   <li>{{ item.name }}</li>
  </ul>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    items: [
     { name: 'いちご' },
     { name: 'りんご' },
     { name: 'みかん' },
     { name: 'ぶどう' }
    ]
   }
  }
 }
</script>

  また、v-forを使う場合には合わせて「key」を設定する必要があります（でないとコンパイルエラーになります）実際には下記のようなエラーが表示されます。

error: Elements in iteration expect to have 'v-bind:key' directives

  ですので、「v-bind」でkeyの属性を設定し、その値にはユニークなものになるよう設定します。ここではそのまま値を入れていますが、インデックス番号などでもOKです。もちろん下記のように省略記法も使えます。

<ul v-for="item of items" :key="item.name">

  実際にHTMLとしてコンパイルされるとこんな感じになります。ちょっとしたリストなどにはこれだけでOKです。 【HTML】※一部省略

<ul>
 <li>いちご</li>
 <li>りんご</li>
 <li>みかん</li>
 <li>ぶどう</li>
</ul>

   

配列のインデックスを取得しながらループで出力する

v-forでは配列の値に加えて、インデックス番号も合わせて取得することもできます。2番目の引数にインデックス用の変数を設定し丸括弧で囲むだけです。データも先ほどと同じ内容で、あとは同じように出力されるように進めていきます。ここではkeyの値にインデックスを入れています。 【Vue】

<template>
 <div id="app">
  <ul v-for="(item, index) of items" v-bind:key="index">
   <li>No.{{ index + 1 }} {{ item.name }}</li>
  </ul>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    items: [
     { name: 'いちご' },
     { name: 'りんご' },
     { name: 'みかん' },
     { name: 'ぶどう' }
    ]
   }
  }
 }
</script>

  このように配列内の値と同じようにインデックス番号も出力されます。IDや番号を充てる時に便利ですね。 【HTML】※一部省略

<ul>
 <li>No.1 いちご</li>
 <li>No.2 りんご</li>
 <li>No.3 みかん</li>
 <li>No.4 ぶどう</li>
</ul>

   

入れ子状になった配列のデータを展開してループで出力する

最後に階層状の配列データを全て出力するケースの場合です。こちらも基本的には同じで、そのまま入れ子の状態でv-forでループさせていきます。2番目のループの参照する配列には最初のループの変数に続けて、展開するデータのキーをつなげます。一見ややこしい感じもしますが、よく見ると同じことを繰り返しているだけですね。もちろん先ほどと同じく2番目の内側にあるループでもkeyは必要になります。 【Vue】

<template>
 <div id="app">
  <ul v-for="item of items" v-bind:key="item.name">
   <li>{{ item.name }}
    <ul v-for="info of item.description" v-bind:key="info.words">
     <li>{{ info.words }}</li>
    </ul>
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    items: [ 
     { name: 'いちご', description: [ { words: '6個'}, { words: '500円'} ]},
     { name: 'りんご', description: [ { words: '1個'}, { words: '100円'} ]},
     { name: 'みかん', description: [ { words: '3個'}, { words: '200円'} ]},
     { name: 'ぶどう', description: [ { words: '1個'}, { words: '600円'} ]}
    ]
   }
  }
 }
</script>

  こんな感じで配列内のすべてのデータをもれなく出力することができました。もちろんここでもインデックスを取得することも可能です。 【HTML】※一部省略

<ul>
 <li>いちご
  <ul>
   <li>6個</li>
   <li>500円</li>
  </ul>
 </li>
 <li>りんご
  <ul>
   <li>1個</li>
   <li>100円</li>
  </ul>
 </li>
 <li>みかん
  <ul>
   <li>3個</li>
   <li>200円</li>
  </ul>
 </li>
 <li>ぶどう
  <ul>
   <li>1個</li>
   <li>600円</li>
  </ul>
 </li>
</ul>

  ちなみにですが、今回のv-forについて接続語としては「of」を採用していますが、「in」を代わりに使うこともできます。ただし出力するのは配列の値であるという前提のため、そのような場合には意味合いとしてもofを使うことが望ましいのではないでしょうか。  

---

  いかがでしょうか、今回はVue.jsで配列データを出力するパターンについてまとめていきましたが、基本的なところを押さえておけばいろんなデータを扱うケースにも対応できますね。DBだけでなくAPIから返ってくるデータもJSON形式などのオブジェクトであることが多いのではないでしょうか。そんな時には今回の内容で対応することになるかと思いますので是非覚えておきたいですね。