Vue入門の第6回（第1回はこちら）です。今回は、メソッドを呼び出して処理を実行する方法を学びます。
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 v-on:click="addCart">買い物かごの中身を増やす</button>
<div class="cart">
<p>買い物かごの中身 {{ cart }}</p>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>このindex.htmlの書き換えでは、買い物かごの中身を増やすボタンに v-on:click=”addCart” という具合に、v-onディレクティブを使ってaddCartメソッドを指定しています。
main.jsを書き換える
次に、前回作成したJSファイル main.js を以下のように書き換えます。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
itemInfos: ["子供向け靴下", "コットン100％", "人気商品！"],
zaiko: 5,
cart: 0
},
methods: {
addCart: function () {
this.cart += 1
}
}
})このmain.jsの書き換えでは、今まであったdataプロパティの他に、新たにmethodsプロパティを追加しています。
新たに追加したmethodsプロパティのなかには、addCartメソッドを記述しています。
表示を確認してみる
ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。買い物かごの中身を増やすボタンを押した際に、買い物かごの中身が1ずつ増えれば成功です。
以下は、これまでに作成したサンプルページです。
https://programming-world.net/sample/vue_sample/06/index.html
買い物かごの中身を増やすボタンを押すと、買い物かごの中身が1ずつ増える動作自体は前回と同じです。
メソッドで処理を実行する
今回の書き換えで何が変わったのか、確認していきましょう。
前回までは、以下のように cart += 1 という処理を、 button要素に直接記述していました。
<button v-on:click="cart += 1">買い物かごの中身を増やす</button>今回のindex.htmlの書き換えでは、買い物かごの中身を増やすボタンに以下のように addCart というメソッド名を指定しています。
↓以下のように書き換えた。
<button v-on:click="addCart">買い物かごの中身を増やす</button>HTMLソースを上記のように書き換えることで、買い物かごの中身を増やすボタンを押した際に、addCartメソッドが呼び出されるようになります。
addCartメソッドの具体的な処理内容は、以下のように main.js に記述します。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
itemInfos: ["子供向け靴下", "コットン100％", "人気商品！"],
zaiko: 5,
cart: 0
},
methods: {
addCart: function () {
this.cart += 1
}
}
})上記のmain.jsのコードでは、新たにmethodsプロパティを追加しています。methodsプロパティのなかにaddCartメソッドを定義して、this.cart を1増やす処理を記述しています。
this.cart というのは、現在のVueインスタンス内にあるcartを指します。addCartメソッドが実行されると、dataプロパティのなかにある cartの初期値は0に指定されていますが、addCartメソッドが実行されるたびにcartの値が1ずつ増やされます。
イベントが発生したら、メソッドを呼び出して処理を実行する
今回の変更について、あらためて確認していきましょう。
現在の 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="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％", "人気商品！"],
zaiko: 5,
cart: 0
},
methods: {
addCart: function () {
this.cart += 1
}
}
})今回は、イベントが発生したらaddCartメソッドを呼び出して処理を実行するように変更しました。この変更により、買い物かごの中身を増やすボタンが押されると、そのたびにaddCartメソッドが呼び出されて実行されます。
ボタンを押すたびに1ずつ増えるという動作は前回と同じですが、メソッドを利用することで、HTMLコード内に実行コードを直接記述するのではなくmain.jsに記述するように変更されています。
HTMLコードと実行コードをファイル単位で分けておくことで、アプリケーションがより大規模になった場合にもメンテナンスのしやすい状態を保つことができます。
次回へ続きます。
