vueのinput入力値取得の詳細説明-jsチュートリアル-php.cn

vueのinput入力値取得の詳細説明

小云云

リリース： 2018-01-15 13:21:02

オリジナル

3616 人が閲覧しました

この記事は、Vue が入力値を取得する問題を解決する方法に関する関連情報を主に紹介し、この記事がそのような問題をマスターできるようにすることを願っています。

vue が入力値を取得する問題の解決策

v-for には複数行の入力入力ボックスがありますが、vue はどのようにして特定の行の入力値を取得するのでしょうか?複数の行がバックグラウンドで返される場合、ページには複数行の入力ボックスが表示され、入力エラーに対するわかりやすいプロンプトが表示されます。 end をクリックして、現在のデータ行をクリアします。最初のアイデアは、v-bind: value binding value を使用することです。そのため、ページに入力された値を取得できない状況が発生し、v-bind は値を変更しません。元のリストにあり、ref を動的にバインドすることはできません。ref は完全にのみ取得できます。すべての入力ボックスの値を取得する this.$refs .itemPriceRef[] は配列であり、送信前に検証できます。、しかし、特定の行の動作を決定できず、Vue は DOM 要素を非常に貧弱に操作します。N 個の情報を検索した後、値を取得する方法が見つかりませんでした。 v-model でリスト内の値を直接バインドする問題は解決されました。この方法では、変更時にリスト内の値が直接変更されるため、入力値が VUE のバインディング元の値と異なるという問題は発生しません。値を設定するのは非常に便利です。私は Vue を学習し始めたばかりで、この方法に慣れていませんでしたが、多くの時間を無駄にしました。

追記: ページ上の入力ボックスの値を取得する 3 つの方法をまとめました。1 つは、v-bind:value + ref を使用する方法です。

たとえば、ログインページにのみ適しています。にはアカウントとパスワードがあり、

2 は元のリストの値を変更する v-model を使用して取得されるため、送信するときに元のリストをたどる必要がありますが、これは少し面倒です。

3 は以下を使用して取得されます。 v-model + ref、それが私ですこうやって書くと、2との違いはsubmit時にrefを直接使って値を取得する点で、入力ボックスの数が不明な場合に便利な気がするのでまとめてみました。専門家にとっては特筆すべきことではないかもしれませんが、Vue を学び始めたばかりの私にとっては、とても時間がかかりました

時間をかけて記録し、印象を深めました。

<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>

上限： >

<span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p>

    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 = &#39;&#39;; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = &#39;&#39;; 
   },

ログイン後にコピー