[Vue]input指定type的binding

寫線上課程作業的時候踩到的雷,分享一下...

做了一個簡易的股票交易器,畫面大概長這樣,

要提供基本的防呆,當購入數量小於0,或是帶有小數時則無法購入

所以在”Buy”這顆按紐上需要對disabled做binding

<button class=”btn btn-primary” @click=”buyStock” :disabled=”ableBuy”>Buy</button>
computed:{
ableBuy(){
return !(this.quantity > 0 && Number.isInteger(this.quantity)) ? true : false;
}}

但在測試時發現,無論輸入怎樣的數量都無法按下購買,quantity一直輸出undefined

<input type=”number” class=”form-control” placeholder=”Quantity”
v-model=”quantity”>

找了很久才找到原因,原來在做input的2-way-binding時有指定到type的類型,

在v-model也必須加上同樣的類型,例如此處的type=”number”,則必須用

v-model.number=”quantity”來進行binding

修正為

<input type=”number” class=”form-control” placeholder=”Quantity”
v-model.number=”quantity”>

後就一切正常了

Like what you read? Give Visy Lockhart a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.