0%

Programmingプログラミングナレッジ

Posted:2019.05.09

Vue.jsでテンプレート内にv-forで配列データを展開する

今回は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形式などのオブジェクトであることが多いのではないでしょうか。そんな時には今回の内容で対応することになるかと思いますので是非覚えておきたいですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】