v-forディレクティブで配列やオブジェクトのデータを表示する [Vue.js]

本記事では、Vue.jsのv-forディレクティブについて紹介します。

1 v-forディレクティブ
2 v-forディレクティブの書式
3 v-forディレクティブの使用例
4 v-forディレクティブのindex
5 v-forディレクティブのkey属性の指定

v-forディレクティブ

一覧表を表示するアプリケーションなどでは、配列などのコレクションのデータに対して繰り返し処理（ループ処理）を行います。

Vue.jsではHTMLテンプレートで繰り返し処理を行うためにv-forディレクティブが用意されています。

v-forディレクティブの書式

v-forディレクティブは以下の書式で使用します。

<要素名 v-for="要素 in コレクション" />

1	<要素名 v-for="要素 in コレクション" />

「コレクション」には、配列やオブジェクトを指定します。

v-forディレクティブの使用例

ここではv-forディレクティブを使用して、繰り返し処理を行うことでHTML要素を出力する例をいくつか示します。

配列の要素を出力

dataオプションに定義した配列をもとに、配列内のデータを出力する例を示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      arrayData: ['データ1', 'データ2', 'データ3']
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

arrayData: ['データ1', 'データ2', 'データ3']

}

}).mount('#app')

HTML

<div id="app">
  <div v-for="datum in arrayData">
    {{datum}}
  </div>
</div>

</div>

上記の例では、dataオプションに定義したarrayDataをHTMLテンプレートのdiv要素に繰り返し出力しています。

オブジェクトのプロパティを出力

v-forディレクティブはオブジェクトに対しても使用することができ、オブジェクトに使用した場合は、オブジェクトが持つプロパティに対して繰り返し処理が行われます。

JavaScript

Vue.createApp({
  data: function() {
    return {
      objectData: {id: 1, name: 'abc', value: 100}
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

objectData: {id: 1, name: 'abc', value: 100}

}

}).mount('#app')

HTML

<div id="app">
  <div v-for="prop in objectData">
    {{prop}}
  </div>
</div>

</div>

上記の例では、dataオプションに定義したobjectDataをHTMLテンプレートのdiv要素に繰り返し出力しています。

配列からリストを出力

配列を繰り返し処理してリスト（<ul><li>）を出力する例を示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      items: ['アイテム1', 'アイテム2', 'アイテム3']
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

items: ['アイテム1', 'アイテム2', 'アイテム3']

}

}).mount('#app')

HTML

<div id="app">
  <ul>
    <li v-for="item in items">
      {{item}}
    </li>
  </ul>
</div>

<ul>

</li>

</ul>

</div>

上記の例では、dataオプションに定義したitemsをHTMLテンプレートのli要素に繰り返し出力しています。

配列からテーブルを出力する

配列を繰り返し処理してテーブル（<tr>）を出力する例を示します。

JavaScript

const items = [
  {id: 1, name: 'アイテム1'},
  {id: 2, name: 'アイテム2'},
  {id: 3, name: 'アイテム3'}
];

Vue.createApp({
  data: function() {
    return {
      items: items
    }
  }
}).mount('#app')

const items = [

{id: 1, name: 'アイテム1'},

{id: 2, name: 'アイテム2'},

{id: 3, name: 'アイテム3'}

];

Vue.createApp({

data: function() {

return {

items: items

}

}).mount('#app')

HTML

<div id="app">
  <table>
    <tr>
      <th>ID</th>
      <th>名前</th>
    </tr>
    <tr v-for="item in items">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>
  </table>
</div>

<table>

<tr>

</tr>

</tr>

</table>

</div>

上記の例では、dataオプションに定義したitemsをHTMLテンプレートのtr要素に繰り返し出力しています。

v-forディレクティブのindex

配列などのコレクションに対して繰り返し処理が行われている際の対象のインデックスが必要な場合はv-forディレクティブにindexを指定することで、処理対象の要素のインデックスを取得することができます。
v-forディレクティブでインデックスを取得する場合は、v-forディレクティブに指定する
要素を「()」で囲み、要素の後にカンマ「,」で区切って”index”を続けて記述します。

<要素名 v-for="(要素, index) in コレクション" />

1	<要素名 v-for="(要素, index) in コレクション" />

取得したインデックスは、HTMLテンプレート内で式を記述する際に利用できるほか、HTML要素に出力（表示）することもできます。

<div v-for="(item, index) in items" />
  {{index}}: {{item}}
<div/>

{{index}}: {{item}}

<div/>

indexは配列だけではなくオブジェクトに使用することもできます。
オブジェクトに指定した場合は、オブジェクトのプロパティ名がindexから取得できます。

v-forディレクティブのkey属性の指定

配列やオブジェクトのプロパティなどのコレクションに対して、v-forディレクティブを使用して繰り返し処理を行うことができますが、繰り返し処理のもとになるコレクションが変更されると、それに応じて変更のたびに繰り返し処理が実行されます。
コレクションが変更されるたびにすべての要素に対して繰り返し処理を実行するのは、高い負荷がかかります。
Vue.jsではコレクションの要素を識別するために「key」という特別な属性を参照して個々の要素を識別しています。
key属性を付与することで、Vueが要素の変更前と変更後の差分を検出できるようになり、効率の良い処理を行うことが可能になります。

HTML

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

{{item.id}}: {{item.name}}

</div>

JavaScript

const items = [
  {
    id: 1,
    name: 'アイテム1'
  },
  {
    id: 2,
    name: 'アイテム2'
  },
  {
    id: 3,
    name: 'アイテム3'
  }
];

Vue.createApp({
  data: function() {
    return {
      items: items
    }
  }
}).mount('#app')

const items = [

{

id: 1,

{

id: 2,

{

id: 3,

}

];

Vue.createApp({

data: function() {

return {

items: items

}

}).mount('#app')

key属性はv-bindディレクティブでバインドますので、以下のように記述することもできます。

<div id="app">
  <div v-for="item in items" :key="item.id">
    {{item.id}}: {{item.name}}
  </div>
</div>

{{item.id}}: {{item.name}}

</div>

Vue.js 入門 Tips 一覧

リンク