vue獲取input輸入值的問題
阿新 • • 發佈:2019-02-19
公司需要,新學VUE,碰到一些坑記錄下。
多行文字框取值問題。
v-for裡有多行input輸入框,vue怎麼獲取某行的輸入的值,隨便寫了點程式碼,意思就是後臺返回了多行的
list集合,頁面顯示多行輸入框,當修改某行的值時進行校驗,輸入錯誤友好提示下,後邊加個清空按鈕,點選
清空當前行資料,最開始的想法是,用v-bind:value繫結值,這樣就出現一種情況,頁面輸入的值無法獲取到,
v-bind不會修改原始list裡的值,而且ref也不能動態繫結,ref只能全部獲取,this.$refs.itemPriceRef[],這樣取的
是所有輸入框的值,是個陣列,可以在提交前進行驗證,但是無法判斷某一行操作,並且vue操作DOM元素非常
非常差,找了N多資料愣是沒找到獲取值的方法,最後發現用v-model直接繫結list裡的值問題解決了,這樣在修
改時會直接修改list裡的值,就不存在輸入值和原始值不同的問題了,VUE在繫結值方面做挺方便的,剛開始學vue,
用的不熟練,沒想到這種方法,浪費了好多時間,不過也學會了很多東西。
PS:總結了3種方式獲取頁面輸入框的值,1是用v-bind:value + ref方式獲取,這種只適用有具體的輸入框才行,
比如登入頁,只有帳號密碼輸入框,
2是用v-model方式獲取,這種是修改原始list值,所以在提交時,還需要遍歷下原來的list,有點麻煩,
3是用v-model + ref 就是我寫的這樣,和2的區別是在提交時,直接用ref取值,感覺在未知數量的輸入框時更好用
自己隨便總結了下,估計在大神看來不值一提,但是對於我一個剛學習vue的人來說,確實浪費了我挺長時間,
花點時間記錄下來,加深下印象。
<div v-model="skuList" v-for="(val, key) in skuList ">
<div>
<div>
<span>價格:</span>
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>
<i v-on:click="dataClearStockPrice(val)"></i>
<i v-on:click="dataClearStockTotal(val)"></i>
</div>
</div>
</div>
checkPrice:function (data) { var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; if(!priceReg.test(data.price)){ Toast({message: "格式錯誤"}); data.price = ""; } }, checkStock:function (data) { var totalReg = /^[0-9]*$/; if(!totalReg.test(data.stock)){ Toast({message: "格式錯誤"}); data.stock = ""; } }, dataClearStockPrice:function(data){ data.price = ''; }, dataClearStockTotal:function(data){ data.stock = ''; },