輸入欲購買商品數量
在商品詳情內容中，還需要提供使用者輸入購買數量的表單欄位、計算金額資訊
接著我們實作表單控制，在 ProductInfo.vue 加上表單控制的區塊，並在 data 中加入輸入項對應的屬性

<template>
<div>
<h2>Product Info</h2>
<div class="product-container">
...
<div class="purchase-form">
<label for="qty">Qty: </label>
<input type="number" id="qty" v-model="quantity">
</div>
</div>
</div>
</template>
<script>
export default {
...
data() {
return {
...
quantity: 0,
};
},
...
}
</script>
<style scoped>
...
.purchase-form {
display: flex;
flex-wrap: nowrap;
width: 100%;
justify-content: center;
align-items: baseline;
}
.form-control {
display: flex;
justify-content: flex-end;
width: 50%;
padding: 10px;
}
.form-control label {
font-size: 1.2em;
}
.form-control input::-webkit-inner-spin-button{
-webkit-appearance: none;
}
.form-control input {
margin: 0 5px;
border: 1px solid #ddd;
box-sizing: border-box;
border-radius: 2px;
line-height: 20px;
width: 40px;
font-size: 1.1em;
text-align: center;
}
</style>

在 input 使用 v-model 來達到資料綁定，當使用者更改購買數量，data.quantity 也會跟著變動，可以在 template 中加入下面內容驗證

<span>{{ quantity }}</span>

接著實作小計計算，這裡可以用 computed 來快速地達成我們的需求

<script>
export default {
...
computed: {
amount() {
return this.product.price * this.quantity;
},
},
...
}
</script>

template 可以如下變更，別忘記加入 filter 來顯示幣值符號

<template>
<div>
<h2>Product Info</h2>
<div class="product-container">
...
<div class="purchase-form">
<div class="form-control">
<label for="qty">Qty: </label>
<input type="number" id="qty" v-model="quantity">
</div>
<div class="purchase-amount">{{ amount | currency }}</div>
</div>
</div>
</div>
</template>
<style scoped>
...
.purchase-amount {
display: flex;
justify-content: flex-start;
width: 50%;
}
</style>