Vue入門の第7回（第1回はこちら）です。今回は、v-onディレクティブを使ってクリックで表示切替するイベント処理を作成します。
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 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 v-for="itemColor in itemColors" v-on:click="changeColor(itemColor.cImage)">
{{ itemColor.cName }}
</div>
<button v-on:click="addCart">買い物かごの中身を増やす</button>
<div class="cart">
<p>買い物かごの中身 {{ cart }}</p>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>このindex.htmlの書き換えでは、<div v-for=”itemColor in itemColors” v-on:click=”changeColor(itemColor.cImage)”> {{ itemColor.cName }} </div>の部分が追加されています。
この部分では、第4回で学んだv-forディレクティブを使って靴下の色名をループ表示しています。また、第5回で学んだv-onディレクティブを使って、靴下の色名をクリックするとその画像に表示切替するように指定しています。
main.jsを書き換える
次に、前回作成したJSファイル main.js を以下のように書き換えます。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
itemInfos: ["子供向け靴下", "コットン100％", "人気商品！"],
itemColors: [
{cName:"ピンク", cImage:"./images/socks-pink.png"},
{cName:"ブルー", cImage:"./images/socks-blue.png"}
],
zaiko: 5,
cart: 0
},
methods: {
addCart: function () {
this.cart += 1
},
changeColor (cImage) {
this.itemImage = cImage
}
}
})このmain.jsの書き換えでは、dataプロパティのなかに itemColors: [ ～ ]の部分を追加しています。
また、methodsプロパティのなかにchangeColorメソッドを追加しています。
表示を確認してみる
ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。尚、同じ階層にあるimagesフォルダのなかにsocks-blue.pngという名前の画像ファイルを追加しています。
以下は、これまでに作成したサンプルページです。
https://programming-world.net/sample/vue_sample/07/index.html
「ピンク」「ブルー」と表示された靴下の色名のテキストをクリックした際に、靴下画像の表示が切り替わるようになれば成功です。
ここまでで、クリックで商品画像を表示切替する処理を作成しました。今回使ったのは今までに学んだ知識ばかりで、新しい知識は登場していません。今回追加した部分について、 以下に詳しく確認していきましょう。
v-forディレクティブを使ってクリックで表示切替する
index.htmlに追加した以下の部分では、第4回で学んだv-forディレクティブを使って、靴下の色名をループ表示しています。
<div v-for="itemColor in itemColors" v-on:click="changeColor(itemColor.cImage)">
{{ itemColor.cName }}
</div>靴下の色名などのデータは、main.jsのなかで配列データとして用意されています。そのため、v-forディレクティブの値には、itemColor in itemColorsという配列をループ表示する形式で指定しています。
v-onディレクティブを使ってクリックで表示切替する
以下の部分では、第5回で学んだv-onディレクティブも使っています。
<div v-for="itemColor in itemColors" v-on:click="changeColor(itemColor.cImage)">
{{ itemColor.cName }}
</div>{{ itemColor.cName }}の部分には、 main.jsのなかで配列データとして用意している靴下の色名がループ表示されます。「ピンク」「ブルー」と表示されるはずです。
v-on:clickを使用しているので、靴下の色名をクリックするとchangeColorメソッドが呼び出されます。changeColorメソッドが呼び出される際には、引数としてitemColor.cImage、つまり、画像ファイルへのパスが渡されます。
イベントが発生したら、メソッドを呼び出す
main.jsでは、第6回で学んだメソッドを追加しています。
changeColor (cImage) {
this.itemImage = cImage
}Vueインスタンスのmethodsプロパティのなかに、上記のchangeColorメソッドを追加しました。
changeColorメソッドでは、引数として画像ファイルへのパスを受け取ります。受け取った画像ファイルへのパスを this.itemImageに代入して画像の表示切替を実行します。
HTMLコードとVueコードを通して確認
最後にもう一度、HTMLコードとVueコードを通して確認しておきましょう。
現在の 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 v-for="itemColor in itemColors" v-on:click="changeColor(itemColor.cImage)">
{{ itemColor.cName }}
</div>
<button v-on:click="addCart">買い物かごの中身を増やす</button>
<div class="cart">
<p>買い物かごの中身 {{ cart }}</p>
</div>
</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％", "人気商品！"],
itemColors: [
{cName:"ピンク", cImage:"./images/socks-pink.png"},
{cName:"ブルー", cImage:"./images/socks-blue.png"}
],
zaiko: 5,
cart: 0
},
methods: {
addCart: function () {
this.cart += 1
},
changeColor (cImage) {
this.itemImage = cImage
}
}
})index.html側では、v-forディレクティブを使って靴下の色名をループ表示しています。その靴下の色名がクリックされたら、v-onディレクティブでchangeColorメソッドを呼び出すように指定しています。
main.js側では、靴下の色名がクリックされてchangeColorメソッドが呼び出されたら、引数として受け取った画像ファイルへのパスをthis.itemImageに代入します。
main.js内の itemImage の値が変更されることで、それと結び付いているindex.html内の <img v-bind:src=”itemImage” /> の部分がリアルタイムで更新され、靴下画像の表示切替が完了します。
次回へ続きます。
