vue input入力値取得の問題解決方法

2452 ワード

vue input入力値取得の問題解決方法
v-forには複数行のinput入力ボックスがあります.vueはどのようにしてある行の入力値を取得しますか.v-bind:valueで値をバインドすると、ページ入力の値が取得できず、v-bindは元のlistの値を変更せず、refも動的にバインドできず、refはすべて取得できません.this.$refs.itemPriceRef[]は、このようにすべての入力ボックスの値を取り、配列であり、提出前に検証することができるが、ある行の操作を判断することができず、vue操作DOM要素が非常に悪く、N多資料を探しても値を取得する方法が見つからず、最後にv-modelでlistの値を直接バインドする問題が解決したことを発見し、修正時にlistの値を直接修正することができる.入力値と元の値が異なるという問題はなく、VUEはバインド値の面で便利で、vueを習い始めたばかりで、使い慣れていないので、この方法は、多くの時間を浪費したが、多くのことを学んだ.
PS:ページ入力ボックスの値を取得する3つの方法をまとめました.1はv-bind:value+refで取得します.これは具体的な入力ボックスのみが適用されます.
例えばログインページ、アカウントパスワード入力ボックスのみ、
2はv-model方式で取得します.これは元のlist値を変更するので、コミット時に元のlistを巡回する必要があります.ちょっと面倒ですが、
3はv-model+refで私が書いたように、2との違いはコミット時に直接refで値を取り、未知数の入力ボックスで使いやすいという感じです
自分で勝手にまとめてみると、大神から見れば言うに値しないかもしれませんが、vueを勉強したばかりの私にとって、確かに長い間無駄にしていました.
時間をかけて記録し、印象を深める.


:>
 
 
 
 
    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 = ''; 
   },
 
 



もし があれば を してあるいは のコミュニティに って を して、 に して、みんなを けることができることを んで、みんなの に する に します!