リストをレンダリングする

4 分

多くの場合、データの操作は、配列やその他の種類のコレクションを対象とします。通常、何らかの形式のループを使用して、コレクション内のすべての項目を反復処理します。 Vue.js では、v-forというディレクティブでループをサポートします。

v-for ディレクティブの概要

リスト内のすべての項目を表示するには、ディレクティブ v-for を使用できます。 v-for の動作は、JavaScript の for...of と非常によく似ています。これは、宣言した変数を介して各項目にアクセスできるようにすることで、コレクションを反復処理します。

v-for の構文は、次のようになります。

v-for="itemName in collectionName"

collectionName は、データオブジェクト内の配列の名前です。各反復では、itemName は現在の項目の ID になります。テンプレートで v-for を使用するには、要素宣言内にこのディレクティブを追加します。これにより、配列内の項目の数と同じ回数だけ HTML 要素が反復されます。

Note

順序指定されていないリスト (ul) を作成する場合、ul 要素には v-for を追加 "しません"。 li 要素に追加します。li 要素は反復処理されるためです。

アプリで v-for を使用する

アプリで v-for ディレクティブを使用するには、次の 2 つの操作を行う必要があります。

データオブジェクトを介して配列を公開します。 v-for ディレクティブを使用するには、data() メソッドが返す配列型のデータを確保します。
v-for ディレクティブを要素に追加します。 v-for ディレクティブを HTML 要素に追加します。配列のデータを表示するには、二重中かっこ ({{ }}) 構文を使用します。

たとえば、データオブジェクト内の名前の配列を公開するとしましょう。

Vue.createApp({
    data() {
        return {
            names: ['Susan', 'Peter', 'Bill' ]
        }
    }
}).mount('#demo');

項目を表示する場合、次のコードを使用できます。

<ul id="demo">
    <li v-for="name in names">{{ name }}</li>
</ul>

コードがレンダリングされると、配列内の名前が表示されます。

Susan
Peter
Bill

キーと状態

データが変更された場合、Vue.js では、表示の適切な部分を最新の情報に更新できる必要があります。リストを操作する場合、リスト全体ではなく個々の項目を更新することをお勧めします。 Vue.js で個々の項目を検出できるようにするには、表示される項目ごとにキーを割り当てます。キーをデータオブジェクトに追加する必要はありません。配列のインデックスを利用して生成できます。

次のコードに示すように、インデックスを取得するには、v-for 宣言を更新します。

<ul id="demo">
    <li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>

index は、配列内の項目ごとに増分されます。 :key ディレクティブには、Vue.js のキーが格納されます。これにより、変更が発生したときに個々の項目を更新することができます。

リストをレンダリングする

v-for ディレクティブの概要

アプリで v-for を使用する

キーと状態

フィードバック