vue獲取input輸入值的問題解決辦法
v-for里有多行input輸入框，vue怎么獲取某行的輸入的值，隨便寫了點代碼，意思就是后臺返回了多行的list集合，頁面顯示多行輸入框，當(dāng)修改某行的值時進(jìn)行校驗，輸入錯誤友好提示下，后邊加個清空按鈕，點擊清空當(dāng)前行數(shù)據(jù)，最開始的想法是，用v-bind:value綁定值，這樣就出現(xiàn)一種情況，頁面輸入的值無法獲取到，v-bind不會修改原始list里的值，而且ref也不能動態(tài)綁定，ref只能全部獲取，this.$refs.itemPriceRef[]，這樣取的是所有輸入框的值，是個數(shù)組，可以在提交前進(jìn)行驗證，但是無法判斷某一行操作，并且vue操作DOM元素非常非常差，找了N多資料愣是沒找到獲取值的方法，最后發(fā)現(xiàn)用v-model直接綁定list里的值問題解決了，這樣在修改時會直接修改list里的值，就不存在輸入值和原始值不同的問題了，VUE在綁定值方面做挺方便的，剛開始學(xué)vue，用的不熟練，沒想到這種方法，浪費了好多時間，不過也學(xué)會了很多東西。
PS:總結(jié)了3種方式獲取頁面輸入框的值，1是用v-bind:value + ref方式獲取，這種只適用有具體的輸入框才行，
比如登錄頁，只有帳號密碼輸入框，
2是用v-model方式獲取，這種是修改原始list值，所以在提交時，還需要遍歷下原來的list，有點麻煩，
3是用v-model + ref 就是我寫的這樣，和2的區(qū)別是在提交時，直接用ref取值，感覺在未知數(shù)量的輸入框時更好用
自己隨便總結(jié)了下，估計在大神看來不值一提，但是對于我一個剛學(xué)習(xí)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>
<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i></pre></div><div><span>上限：</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)"<span style="font-family:Arial,Helvetica,sans-serif"> ></span></span> <pre></pre> <p></p> <pre></pre> <pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> </span></div> </div> </div></pre><pre name="code" class="html"></pre><pre name="code" class="html"> 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 = ''; },</pre><br data-filtered="filtered"> <span style="white-space:pre" data-filtered="filtered"></span> <pre name="code" class="html"></pre> <p></p> <p><br data-filtered="filtered"> </p> 如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
