v-forで配列を表示する[v-bind:key][index][Vue.js]

2019年5月8日

v-forディレクティブを利用して、配列の要素を繰り返し表示させてみます。

 

 

dataオプションにbooksというプロパティ名の配列を用意し、v-forディレクティブで繰り返し表示させています。

20行目

booksプロパティとしての配列からbookという変数名に置き換えたオブジェクトを取得しています。v-forディレクティブは一般的に下記のような記述をします。

またv-forディレクティブを利用する場合、v-bindディレクティブで一意の(ユニークな)keyプロパティを設定する必要があります。上記コードでは、book.idによって一意のkeyを設定しています(後述に追加説明あり)。

 

配列のインデックスを取得することも可能です。

配列の要素にはインデックスが割り当てられています。実際に表示させたのが下記画像で、インデックス番号が0(ゼロ)から始まっているのが確認できます。

 

 

 

 

一意のkeyプロパティを設定する


 

上述したように、v-forディレクティブを利用する場合、「v-bind:key=”◯◯”」で要素に一意の(ユニークな)keyプロパティを設定する必要があります。これは表示された各要素(つまりDOM)を、Vue.jsが追跡する際のパフォーマンスに影響するからです。例えばv-forによるリスト表示をトランジションによって並び替えする時などに重要となります。

 

ただし、配列を元にその要素を繰り返し表示させた場合、下記のようにして配列のインデックスを一意なkeyとして利用しないようにします

 

 

関連ページ

Vue.jsでセレクトボックス[select][複数]

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー