如何不允许输入字段值大于其他值

Question

I have several dynamic fields inside which I have some values, the first field is Total Amt and other are some dynamic fields and then one more Bal Amt which is initially opposite to total amount.

suppose Total Amt=500 then Bal Amt=-500 in my dynamic field one field is there which will be there always ie tender Cash

So what I am trying to do is

Tender cash can be greater then Total Amount like if Total Amount = 500 then Tender cash can be 550 and then Bal Amt automatically will be +50

But there are several other fields I want them to restrict when Total bal is 0 then it should not accept input or alert or console

Like if Total Amt=500 tender cash=500 || 550 tender cash=500 || 550 then all other will not take any input

if Total Amt=500 tender cash 50 then other can take inputs til bal Amt=0 once bal Amt=0 the other should not take input.

I am using computed property to calculation, I don't know how to do above things.

Code

 new Vue({ el: '#app', data() { return { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "TC", "PAYMENTNAME": "Tender Cash" }, { "PAYMENTCODE": "CC", "PAYMENTNAME": "Credit Card" }, { "PAYMENTCODE": "Cp", "PAYMENTNAME": "Coupn" }, { "PAYMENTCODE": "ptm", "PAYMENTNAME": "PayTM" }, { "PAYMENTCODE": "Cr", "PAYMENTNAME": "Credit" }, { "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] } }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <label>Total Amt</label> <input type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label>{{mode.PAYMENTNAME}}</label> <input type="text" v-model="mode.Amount"> </div> <div> <label>Bal Amt</label> <input type="text" :value="balAmt"> </div> </div>

I have to do this with Vue.js only

Answer 1

You can do something like this -

I have used :disabled

<input type="text" v-model="mode.Amount" :disabled="balAmt>=0 && mode.PAYMENTCODE!='TC'">

 new Vue({ el: '#app', data() { return { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "TC", "PAYMENTNAME": "Tender Cash" }, { "PAYMENTCODE": "CC", "PAYMENTNAME": "Credit Card" }, { "PAYMENTCODE": "Cp", "PAYMENTNAME": "Coupn" }, { "PAYMENTCODE": "ptm", "PAYMENTNAME": "PayTM" }, { "PAYMENTCODE": "Cr", "PAYMENTNAME": "Credit" }, { "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] } }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <label>Total Amt</label> <input type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label>{{mode.PAYMENTNAME}}</label> <input type="text" v-model="mode.Amount" :disabled="balAmt>=0 && mode.PAYMENTCODE!='TC'"> </div> <div> <label>Bal Amt</label> <input type="text" :value="balAmt"> </div> </div>

Answer 2

 new Vue({ el: '#app', data() { return { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "TC", "PAYMENTNAME": "Tender Cash" }, { "PAYMENTCODE": "CC", "PAYMENTNAME": "Credit Card" }, { "PAYMENTCODE": "Cp", "PAYMENTNAME": "Coupn" }, { "PAYMENTCODE": "ptm", "PAYMENTNAME": "PayTM" }, { "PAYMENTCODE": "Cr", "PAYMENTNAME": "Credit" }, { "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] } }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } }, methods: { onKeyUp(evt) { if (this.balAmt > 0) { let id = evt.target.id if (id !== 'TC') { let paymentMode = this.paymentMode.find(mode => mode.PAYMENTCODE === id) paymentMode.Amount = '' } } } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <label>Total Amt</label> <input type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label>{{mode.PAYMENTNAME}}</label> <input :id="mode.PAYMENTCODE" type="text" v-model="mode.Amount" @keyup="onKeyUp"> </div> <div> <label>Bal Amt</label> <input type="text" :value="balAmt"> </div> </div>

Answer 3

you could set display flex to the div that contains both label and input and then apply the css directives applied as below:

 new Vue({ el: '#app', data() { return { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "TC", "PAYMENTNAME": "Tender Cash" }, { "PAYMENTCODE": "CC", "PAYMENTNAME": "Credit Card" }, { "PAYMENTCODE": "Cp", "PAYMENTNAME": "Coupn" }, { "PAYMENTCODE": "ptm", "PAYMENTNAME": "PayTM" }, { "PAYMENTCODE": "Cr", "PAYMENTNAME": "Credit" }, { "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] } }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } } })

 .payment-mode { display: flex; } .payment-mode > * { flex: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="payment-mode"> <label class="payment-name">Total Amt</label> <input class="payment-field" type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="payment-mode form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label class="payment-name">{{mode.PAYMENTNAME}}</label> <input class="payment-field" type="text" v-model="mode.Amount"> </div> <div class="payment-mode"> <label class="payment-name">Bal Amtdasdsadsadsad</label> <input class="payment-field" type="text" :value="balAmt"> </div> </div>