Detailed explanation of vue getting input input value

This article mainly introduces relevant information on how to solve the problem of Vue obtaining input input value. I hope this article can help everyone and let everyone master such problems. Friends who need it can refer to it. I hope it can help everyone.

The solution to the problem of vue getting input input value

There are multiple lines of input input boxes in v-for. How does vue get the input value of a certain line? Just write it I added some code, which means that a multi-line list collection is returned in the background. The page displays a multi-line input box. When the value of a certain row is modified, verification is performed. When inputting an error-friendly prompt, a clear button is added at the end. Click to clear the current row of data. , the initial idea is to use v-bind:value to bind the value. This will cause a situation where the value entered on the page cannot be obtained. v-bind will not modify the value in the original list, and ref cannot be dynamically bound. Definitely, ref can only be obtained in full, this.$refs.itemPriceRef[], which takes the values ​​​​of all input boxes. It is an array and can be verified before submission. However, it is impossible to determine a certain row of operations, and Vue operates DOM elements very quickly. It's very bad. I searched for a lot of information but couldn't find a way to get the value. Finally, I found that the problem was solved by directly binding the value in the list with v-model. In this way, the value in the list will be directly modified when modifying, and there will be no input. The value is different from the original value. VUE is very convenient for binding values. I just started learning Vue and I am not proficient in using it. I didn’t expect this method. It wasted a lot of time, but I also learned a lot.

PS: Summarized 3 ways to get the value of the input box on the page. The first one is to use v-bind:value + ref. This method is only suitable for specific input boxes.

For example, the login page only has an account and password input box.

2 is obtained using the v-model method. This method modifies the original list value, so when submitting, you need to traverse the original list, which is a bit troublesome.

3 uses v-model + ref, which is how I wrote it. The difference from 2 is that when submitting, ref is used directly to get the value. I feel it is more useful when there are an unknown number of input boxes.

I just summed it up casually. It is probably not worth mentioning in the eyes of the masters, but for me, a person who has just learned vue, it did waste me a long time.

Take some time to record it. Deepen your impression.

<p v-model="skuList" v-for="(val, key) in skuList "> 
<p> 
<p> 
<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></p><p><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></p> 
</p> 
</p></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>

Related recommendations:

About obtaining the attr method and prop method in jQuery Input's checked attribute operation method

Jquery various ways to obtain the value in input type=text

PHP obtains the value in the input input box The value is compared to the database and displayed

The above is the detailed content of Detailed explanation of vue getting input input value. For more information, please follow other related articles on the PHP Chinese website!