Vue入門の第5回（第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>
<!--【以下のボタンを押したら、買い物かごの中身が増えるようにしたい】-->
<button>買い物かごの中身を増やす</button>
<div class="cart">
<p>買い物かごの中身 {{ cart }}</p>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>このindex.htmlの書き換えでは、買い物かごの中身を増やすボタンと、買い物かごの中身を表示する部分を追加しています。この時点ではまだVueで表示を制御していないので、単純にbutton要素やdiv要素などを追加しただけです。
main.jsを書き換える
次に、前回作成したJSファイル main.js を以下のように書き換えます。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
itemInfos: ["子供向け靴下", "コットン100％", "人気商品！"],
zaiko: 5,
cart: 0
}
})このmain.jsの書き換えでは、dataプロパティのなかに cart: 0 の部分を追加しています。cartは買い物かごの中身の個数をセットするための変数として用意しています。cartの初期値は0とします。
この時点ではまだ、変数cart とHTMLコードは関連付けられていません。
v-on: を使ってイベント取得する
買い物かごの中身を増やすボタンを押した際に、買い物かごの中身が1ずつ増えるように、さきほどindex.htmlに追加した買い物かごの中身を増やすボタンをVueの「v-on:」を使った書式に書き換えます。
<button>買い物かごの中身を増やす</button>↓以下のように書き換える
<button v-on:click="cart += 1">買い物かごの中身を増やす</button>HTMLソースを上記のように書き換えることで、 買い物かごの中身を増やすボタンを押した際に、さきほど main.js に追加した以下の cart: 0 でセットした値が1ずつ増えるようになります。
cart: 0表示を確認してみる
ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。買い物かごの中身を増やすボタンを押した際に、買い物かごの中身が1ずつ増えるようになっていれば成功です。
以下は、これまでに作成したサンプルページです。
https://programming-world.net/sample/vue_sample/05/index.html
イベントが発生したら、cartの値を1増やす処理を実行
「v-on:」を使った書式にしたことで、何が起きたのか確認していきましょう。
現在の 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>
<button v-on:click="cart += 1">買い物かごの中身を増やす</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％", "人気商品！"],
zaiko: 5,
cart: 0
}
})Vueのv-onディレクティブを使って v-on:click=”cart += 1″ と記述することで、その要素をクリックするイベントが発生するたびに、変数cartの値が1ずつ増えるようになります。
現在の cart の値を画面に表示するには {{ cart }} という具合に波括弧を二重にして記述します。
Vueの {{ ～ }} の書式を使うと、値が変更されるたびに表示が更新されます。画面には、リアルタイムのcartの値が表示されます。
次回へ続きます。
