Vue入門9 在庫が0になった場合の処理

Vue入門の第9回（第1回はこちら）です。今回は、在庫が0になった場合の処理を作成します。

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)" 
		    v-bind:style="{ backgroundColor: itemColor.cCode }" 
		    style="width:30px; height:30px; margin-bottom:20px;"
		    >
		    </div>

		    <button 
		    v-on:click="addCart" 
		    v-bind:disabled="soldout"
		    >買い物かごの中身を増やす</button>
		    <div class="cart">
		        <p>買い物かごの中身 {{ cart }}</p>
		    </div>
		</div>

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

このindex.htmlの書き換えでは、v-bind:disabled=”soldout”の部分を追加しています。この部分では、第2回で学んだv-bindディレクティブを使って、HTMLコードのbutton要素のdisabled属性の値とVueコードを結びつけています。

main.jsを書き換える

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

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下',
        itemImage: './images/socks-pink.png',
        itemInfos: ["子供向け靴下", "コットン100％", "人気商品！"],
        itemColors: [
            {cName:"ピンク", cCode:"#ee6699", cImage:"./images/socks-pink.png"},
            {cName:"ブルー", cCode:"#33aaee", cImage:"./images/socks-blue.png"}
        ],
        zaiko: 5,
        cart: 0,
        soldout: false
    },
    methods: {
        addCart: function () {
            this.cart += 1
            this.zaiko -= 1
            if (this.zaiko <= 0) {this.soldout = true}
        },
        changeColor (cImage) {
            this.itemImage = cImage
        }
    }
})

このmain.jsの書き換えでは、dataプロパティのなかに soldout: false の部分を追加しています。soldoutは、完売したかどうかを保持するために用意した変数です。変数soldoutの初期値は false としています。

さらに、addCartメソッドのなかに this.zaiko -= 1を追加しています。この部分では、 addCartメソッドが実行されるたびに変数zaikoの値が1ずつ減るように指定しています。

また、addCartメソッドのなかに if (this.zaiko <= 0) {this.soldout = true}を追加しています。この部分では、変数zaikoの値が0以下になったら、このVueインスタンス内の変数 soldout を true にするように指定しています。

表示を確認してみる

ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。以下は、今回作成したサンプルページです。

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

[買い物かごの中身を増やす]ボタンを押していくと、在庫状況や買い物かごの中身の表示が変わり、在庫が無くなった時点でボタンが押せなくなれば成功です。

在庫は zaiko: 5 と初期値をセットしているので、5回ボタンを押すと在庫が0になり、買い物かごの中身は5になり、ボタンが押せなくなるはずです。

今回の変更のポイント

今回の変更のポイントは、addCartメソッドにzaikoを減らす処理と、zaikoが0以下になったらsoldoutをtrueにする処理を加えた点です。

addCart: function () {
    this.cart += 1
    this.zaiko -= 1
    if (this.zaiko <= 0) {this.soldout = true}
}

上記コードでは、soldoutをtrueにする処理が追加されています。このsoldoutの値は、以下のHTMLコードのbutton要素の部分で使用されます。

<button 
v-on:click="addCart" 
v-bind:disabled="soldout"
>買い物かごの中身を増やす</button>

上記のHTMLコードでは、v-bind:disabled=”soldout”のところで、バインドされたsoldoutの値が使用されています。

disabled属性は、HTMLの標準仕様で定義されている属性で、この属性値がtrueならその要素を非アクティブになります。soldoutの値をtrueにしたことで、button要素が非アクティブになってボタンが押せなくなったのです。

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)" 
		    v-bind:style="{ backgroundColor: itemColor.cCode }" 
		    style="width:30px; height:30px; margin-bottom:20px;"
		    >
		    </div>

		    <button 
		    v-on:click="addCart" 
		    v-bind:disabled="soldout"
		    >買い物かごの中身を増やす</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:"ピンク", cCode:"#ee6699", cImage:"./images/socks-pink.png"},
            {cName:"ブルー", cCode:"#33aaee", cImage:"./images/socks-blue.png"}
        ],
        zaiko: 5,
        cart: 0,
        soldout: false
    },
    methods: {
        addCart: function () {
            this.cart += 1
            this.zaiko -= 1
            if (this.zaiko <= 0) {this.soldout = true}
        },
        changeColor (cImage) {
            this.itemImage = cImage
        }
    }
})

だんだんコードが長くなってきましたが、第1回から段階を踏んで見てきた人にとってはそれほど難しく感じないのではないでしょうか。

次回へ続きます。