Vue MasteryのIntro to Vue 2をやってみる~Lesson 4~
はじめに
ご覧いただきありがとうございます。mocです。
前回は、Vue MasteryのIntro to Vue 2のlesson3をやってみました。
今回は、引き続き、lesson4をやっていきます。
今回の内容
lesson4では、List Rendering（リストレンダリング）について学べます。
htmlでは、ulタグやolタグを使って、その中にliタグを並べていくことで表現できますね。
さて、Vueを使うとどんな風に表現できるのか、楽しみです。
事前準備
今回は、（lesson3をやっていれば、）事前準備は不要です。
必要なファイルは下記の通りです。
- main.js
- index.html
- style.css
- vmSocks-green.jpg
それでは、やっていきましょう！
今回の目的
製品の詳細のリストを表示したい！
コーディングスタート
index.htmlは現時点でこのようになっています。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
まず、main.jsに製品の詳細に関するデータ（details）を配列で定義します。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: './assets/vmSocks-green.jpg',
- inStock: true
+ inStock: true,
+ details: ["80% cotton", "20% polyester", "Gender-neutral"],
}
})
課題
製品の詳細をページに表示したいが、この配列を使ってどのようにして表示できるのか？
解決方法
v-forディレクティブを利用します。
このv-forディレクティブは、配列データをループ処理することができるので、配列に含まれるデータを順番に表示することが可能です。
index.htmlを編集してみましょう。
（該当箇所の前後のみ示します。）
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
+ <ul>
+ <li v-for="detail in details">{{ detail }}</li>
+ </ul>
</div>
たったこれだけです。ブラウザでindex.htmlを表示してみましょう。
うまく表示されましたね！
仕組みについてみていきます。
v-forディレクティブの構文は、javascriptのfor ofやfor inのそれとよく似ています。
単数形のdetailはエイリアスと呼ばれ、配列の中の値が順番に入る入れ物となります。
inの後のdetailsは、コレクションと呼ばれ、ループ処理を行う対象を指定します。
今回、v-forディレクティブはliタグの中で利用されているので、detailsの配列の中の値の個数分liタグが出力されます。
それでは、もう少し複雑な例をみてみましょう。
オブジェクトの繰り返し
製品ページでは、異なる型番の同一製品を表示できるようにする必要があります。
そこで、main.jsにvariantsというデータを用意します。
今回の例では、同じ詳細情報(detail)をもつ色違いの製品があるとしましょう。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: './assets/vmSocks-green.jpg',
inStock: true,
details: ["80% cotton", "20% polyester", "Gender-neutral"],
+ variants: [
+ {
+ variantId: 2234,
+ variantColor: "green"
+ },
+ {
+ variantId: 2235,
+ variantColor: "blue"
+ }
+ ]
}
})
次に、index.htmlを編集して、variantsの中のvariantColorを全て表示できるようにします。
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
+ <div v-for="variant in variants">
+ <p>{{ variant.variantColor }}</p>
+ </div>
</div>
この状態でindex.htmlをブラウザで再表示してみましょう。
greenとblueが表示できましたね！
今回の場合、variantオブジェクトから色の情報（variantColor）を表示させています。
もし、{{ variant }}のみを記載すると、オブジェクト全体が表示されます。
興味のある方は試してみましょう。
なお、このように複数要素を表示する場合、特定のキー属性を使うことが推奨されます。
今回の場合、variantのユニークなキーである、variantIdプロパティを使いましょう。
index.htmlを次のように編集します。
（表示は変わりません。）
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
- <div v-for="variant in variants">
+ <div v-for="variant in variants" :key="variant.variantId">
<p>{{ variant.variantColor }}</p>
</div>
</div>
まとめ
lesson4では、Rendering（リストレンダリング）について学びました。
v-forディレクティブを用いることで、Vueインスタンスに定義した配列データをその値の個数分、簡単に表示できるようになりました。
Discussion