Vue入門4 v-for を使ったリスト表示

Vue入門の第4回(第1回はこちら)です。今回は、Vueの「v-for」を使ったリスト表示について学びます。

index.htmlを書き換える

前回作成したHTMLファイル index.html を以下のように書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
	<div class="item">

		<div class="item-image">
		    <img v-bind:src="itemImage" />
		</div>

		<div class="item-info">
		    <h2>{{ itemName }}</h2>
		    <ul><li>【ここに商品情報をリスト表示したい】</li></ul>
		    <p v-if="zaiko > 2">在庫あり</p>
		    <p v-else-if="zaiko <= 2 && zaiko > 0">残りわずか!</p>
		    <p v-else>在庫なし</p>
		</div>

	</div>
</div>
<script src="main.js"></script>
</body>
</html>

このindex.htmlの書き換えでは、<ul><li>【ここに商品情報をリスト表示したい】</li></ul>の部分を追加しています。この時点ではまだVueで表示を制御していないので、単純にul要素とli要素を追加しただけです。

main.jsを書き換える

次に、前回作成したJSファイル main.js を以下のように書き換えます。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下',
        itemImage: './images/socks-pink.png',
        itemInfos: ["子供向け靴下", "コットン100%", "人気商品!"],
        zaiko: 5
    }
})

このmain.jsの書き換えでは、dataプロパティのなかに itemInfos: [“子供向け靴下”, “コットン100%”, “人気商品!”] の部分を追加しています。この部分では itemInfos という配列データを作成しています。

この時点ではまだ、配列データ itemInfos とHTMLコードは関連付けられていません。

v-forを使ってリスト表示にする

商品情報をリスト表示にするために、さきほどindex.htmlに追加した<li>~</li>の部分をVueの「v-for」を使った書式に書き換えます。

<ul><li>【ここに商品情報をリスト表示したい】</li><ul>

↓以下のように書き換える

<ul><li v-for="itemInfo in itemInfos">{{ itemInfo }}</li><ul>

HTMLソースを上記のように書き換えることで、さきほど main.js に追加した以下のitemInfos: でセットされた配列の内容に対応したリスト表示となります。

itemInfos: ["子供向け靴下", "コットン100%", "人気商品!"],

表示を確認してみる

ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。以下のように、商品情報が「子供向け靴下」「コットン100%」「人気商品!」と、リスト表示されるようになれば成功です。

以下は、これまでに作成したサンプルページです。

https://programming-world.net/sample/vue_sample/04/index.html

リスト内容を配列に入れてVue側で管理する

「v-for」を使った書式にしたことで、何が起きたのか確認していきましょう。

現在の index.html は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
	<div class="item">

		<div class="item-image">
		    <img v-bind:src="itemImage" />
		</div>

		<div class="item-info">
		    <h2>{{ itemName }}</h2>
		    <ul><li v-for="itemInfo in itemInfos">{{ itemInfo }}</li></ul>
		    <p v-if="zaiko > 2">在庫あり</p>
		    <p v-else-if="zaiko <= 2 && zaiko > 0">残りわずか!</p>
		    <p v-else>在庫なし</p>
		</div>

	</div>
</div>
<script src="main.js"></script>
</body>
</html>

現在の main.js は、以下の通りです。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下',
        itemImage: './images/socks-pink.png',
        itemInfos: ["子供向け靴下", "コットン100%", "人気商品!"],
        zaiko: 5
    }
})

Vueのv-forディレクティブを使って v-for=”itemInfo in itemInfos” と記述することで、配列 itemInfos の各要素を itemInfo として順番に取り出せます。配列要素の中身を書き出すには、{{ itemInfo }} という具合に波括弧を二重にして記述します。

配列データ自体は、Vue側で用意します。配列名: [“配列要素1”, “配列要素2”, “配列要素3”]という具合に[ ~ ]で囲んで記述することで、配列データを作成できます。

リストの内容をHTMLコードにベタ打ちするのではなく、Vue側で配列にして管理することで、表示内容や表示順序などを動的に変化させられるようになります。静的なウェブページから、動的なウェブアプリケーションになるというわけです。

次回へ続きます。