快捷導(dǎo)航

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

更新時(shí)間：2017年10月17日 11:12:29 作者：焦點(diǎn)

這篇文章主要介紹了vue獲取input輸入值的問(wèn)題解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握這樣的問(wèn)題，需要的朋友可以參考下

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>

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: