vue獲取input輸入值的問(wèn)題解決辦法

v-for里有多行input輸入框，vue怎么獲取某行的輸入的值，隨便寫(xiě)了點(diǎn)代碼，意思就是后臺(tái)返回了多行的list集合，頁(yè)面顯示多行輸入框，當(dāng)修改某行的值時(shí)進(jìn)行校驗(yàn)，輸入錯(cuò)誤友好提示下，后邊加個(gè)清空按鈕，點(diǎn)擊清空當(dāng)前行數(shù)據(jù)，最開(kāi)始的想法是，用v-bind:value綁定值，這樣就出現(xiàn)一種情況，頁(yè)面輸入的值無(wú)法獲取到，v-bind不會(huì)修改原始list里的值，而且ref也不能動(dòng)態(tài)綁定，ref只能全部獲取，this.$refs.itemPriceRef[]，這樣取的是所有輸入框的值，是個(gè)數(shù)組，可以在提交前進(jìn)行驗(yàn)證，但是無(wú)法判斷某一行操作，并且vue操作DOM元素非常非常差，找了N多資料愣是沒(méi)找到獲取值的方法，最后發(fā)現(xiàn)用v-model直接綁定list里的值問(wèn)題解決了，這樣在修改時(shí)會(huì)直接修改list里的值，就不存在輸入值和原始值不同的問(wèn)題了，VUE在綁定值方面做挺方便的，剛開(kāi)始學(xué)vue，用的不熟練，沒(méi)想到這種方法，浪費(fèi)了好多時(shí)間，不過(guò)也學(xué)會(huì)了很多東西。

PS:總結(jié)了3種方式獲取頁(yè)面輸入框的值，1是用v-bind:value + ref方式獲取，這種只適用有具體的輸入框才行，

比如登錄頁(yè)，只有帳號(hào)密碼輸入框，

2是用v-model方式獲取，這種是修改原始list值，所以在提交時(shí)，還需要遍歷下原來(lái)的list，有點(diǎn)麻煩，

3是用v-model + ref 就是我寫(xiě)的這樣，和2的區(qū)別是在提交時(shí)，直接用ref取值，感覺(jué)在未知數(shù)量的輸入框時(shí)更好用

自己隨便總結(jié)了下，估計(jì)在大神看來(lái)不值一提，但是對(duì)于我一個(gè)剛學(xué)習(xí)vue的人來(lái)說(shuō)，確實(shí)浪費(fèi)了我挺長(zhǎng)時(shí)間，

花點(diǎn)時(shí)間記錄下來(lái)，加深下印象。

<div v-model="skuList" v-for="(val, key) in skuList "> <div> <div> <span>價(jià)格：</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: "格式錯(cuò)誤"});      data.price = "";     }    },    checkStock:function (data) {     var totalReg = /^[0-9]*$/;     if(!totalReg.test(data.stock)){      Toast({message: "格式錯(cuò)誤"});      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>