Javascript 使用VueJS 2.5.17自动计算动态表单中的表单字段值

我有一个带有四个输入字段的动态表单，我可以添加新行或删除行

单击付款按钮时添加第一行；单击“付款”按钮时，OnGetModalAddressRow（）函数将运行，并显示一个模式，初始表单行包含4个输入字段，其中预定义了subTotal&amountPaid字段，允许我添加新行或删除行

每行的表单字段为： 小计： 已付金额： 托巴兰斯： 付款方式：

我想要达到的目标：

单击addRow按钮时，我希望它使前一行中的平衡金额成为新行的小计和支付金额，依此类推为零平衡金额

在前一行中禁用removeRow按钮的功能也是一个新增功能：这将强制用户有序地删除行，以保持精确的计算

但是，如果有更好的方法允许用户删除任何行（第一行除外），并且仍然能够精确计算表单字段的值，那么这将是非常值得赞赏的

检查以下代码以更好地理解： HTML:

付款按钮

<li><button type="button" v-on:click="onGetModalAddRow('splitpayments')" class="btn waves-effect waves-light btn-success"  data-toggle="modal" data-target="#getPayFormModal" data-whatever="@getbootstrap" title="Make Payment" >PAY</button></li>

支付

付款详情表格

    <!-- /. START MODAL -->
    <!-- START SPLIT PAYMENT FORM INIT -->
    <div class="modal fade" id="getPayFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
                      <div class="modal-dialog" role="document">

                          <div class="modal-content">
                           <div class="modal-header">
     <h4 class="modal-title" id="exampleModalLabel1" >PAYMENT DETAILS</h4>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          </div>

         <div class="modal-body">
          <form class="vld-parent" ref="formContainer">

<input type="hidden" class="colorfieldblue" name="customer_amount_paid" id="customer_amount_paid" v-model="maincartsection.customer_amount_paid" :value="computeCustomerSubTotal" required />

<div v-for="(itm, index) in maincartsection.splitpaymentformitems.items" :id="index">
    <a v-on:click="removeRow(index)" style="color: red; cursor: pointer;" title="Remove Row" data-toggle="tooltip" data-original-title="Close"> <i class="fa fa-close text-danger"></i> </a>

<div class="form-group" >

<div class="row">
<div :class="{'col-6':'col-6','error': errors.has('subtotal_' + itm.id)}" >

 <label :for="'subtotal'+itm.id" class="control-label">Sub Total:</label>

<input type="text" class="form-control input"  :id="'subtotal'+index" :key="itm.id" :name="'subtotal_' + itm.id" v-validate="'required|min:3'" v-model="maincartsection.splitpaymentformitems.items[index].subtotal" :value="computeCustomerSubTotal" required  placeholder="0"  disabled="disabled" >

<div class="help-block"><ul role="alert"><li v-text="errors.first('subtotal_' + itm.id)"></li></ul></div>

<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
 </div>

<div :class="{'col-6':'col-6','error': errors.has('amountpaid_' + itm.id)}" >

<label :for="'amountpaid'+itm.id" class="control-label">Amount Paid:</label>

 <input type="text" class="form-control input"  :id="'amountpaid'+index" :key="itm.id" :name="'amountpaid_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].amountpaid"  required placeholder="0.00" v-on:change="onAmountEntered(index)" @focus="onAmountPaidFieldFocus(index)" >

 <div class="help-block"><ul role="alert"><li v-text="errors.first('amountpaid_' + itm.id)"></li></ul></div>

<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>


</div>

</div>



<div class="form-group" >

<div class="row">

<div :class="{'col-6':'col-6','error': errors.has('tobalance_' + itm.id)}" >

<label :for="'tobalance'+itm.id" class="control-label">To Balance:</label>

<input type="text" class="form-control input"  :id="'tobalance'+index" :key="itm.id" :name="'tobalance_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].tobalance" :value="computeToBalance" required  placeholder="0"  disabled="disabled" >


<div class="help-block"><ul role="alert"><li v-text="errors.first('tobalance_' + itm.id)"></li></ul></div>

<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>


 <div :class="{'col-6':'col-6','error': errors.has('paymentmethod_' + itm.id)}" >

 <label :for="'paymentmethod'+itm.id" class="control-label">Payment Method:</label>

<select class="custom-select col-12 input" :id="'paymentmethod'+index" :key="itm.id" :name="'paymentmethod_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].paymentmethod" required>

<option v-for="(paymntoptn, index) in items.availablepaymentoptions" :value="paymntoptn.payment_title_slug" v-text="paymntoptn.payment_title"></option>

 </select>


<div class="help-block"><ul role="alert"><li v-text="errors.first('paymentmethod_' + itm.id)"></li></ul></div>

<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
 </div>
</div>

</div>


<hr style="background-color: #009efb;" />

</div>

</form>
</div>

<div class="modal-footer">
 <button type="button" style="margin-right: 30%;" class="btn btn-danger waves-effect text-left" data-dismiss="modal">CANCEL</button>

<button type="button" v-on:click="addRow()" title="Split Payment" class="btn btn-info waves-effect waves-light" style="float: right; margin-right: 3%;"><i class="fa fa-plus"></i></button> 

<button type="button" :disabled="errors.any()"  class="btn btn-success">PAY NOW</button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <!-- END SPLIT PAYMENT FORM INIT -->
                                <!-- /. END MODAL -->

付款详情
&时代；
小计：


支付金额：


要平衡：


付款方式：



取消
现在付款

JAVASCRIPT（VueJs）：

//启动模式
OnGetModalAddressRow:函数（modalformdatasection）{
self=这个；
//清空以前的modalformdata数组，然后为当前表单数据添加新行
self.validations.fieldstatuslogs=[]；
self.maincartsection.splitpaymentformitems.items=[]；
self.maincartsection.splitpaymentformitems.id=0；
//开始分期付款
如果（modalformdatasection==“拆分付款”）{
self.\u添加RowHelper（self.computeCustomerSubTotal、self.computeCustomerSubTotal、self.computeToBalance“”）；
}
//结束分期付款
},
//端模态
//启动addRow辅助函数
_addRowHelper:函数（newSubTotal、amountpaid、tobalance、paymentmethod）{
//开始添加另一行
self.maincartsection.splitpaymentformitems.items.push（{id:self.maincartsection.splitpaymentformitems.id++，小计：newSubTotal，AmountPayed:AmountPayed，tobalance:tobalance，paymentmethod:paymentmethod}）；
self.validations.fieldstatuslogs.push({
小计：{
有效吗：正确，
文本：“”
},
已付金额：{
有效吗：正确，
文本：“”
},
托巴兰斯：{
有效吗：正确，
文本：“”
},
付款方式：{
有效吗：正确，
文本：“”
},
});
//结束添加另一行
},
//EndAddRow辅助函数
//启动拆分付款-addRow函数
addRow:function（）{
self=这个；
var LastIteminarayIndex=''；
if（self.maincartsection.splitpaymentformitems.items.length<1）{
//警报（“添加第一项”）；
//禁用已支付金额字段
//document.getElementById（'customer_amount_paid'）.focus（）；
//self.splitPaymentClicked=true；
self.maincartsection.splitpaymentformitems.splitPaymentStatus=1；
//使用购物车值初始化第一个项目值
//调用OnGetModalAddressRow函数以使用购物车值初始化第一个项目值
self.onGetModalAddRow（“拆分付款”）；
返回；
}
LastIteminarayIndex=self.maincartsection.splitpaymentformitems.items.length-1；
var subTotalOfIndex=parseFloat（document.getElementById（'subtotal'+lastIteminarayIndex）.value）；
如果（！parseFloat（document.getElementById（'amountpaid'+LastIteminarayIndex）.value））{
警报（“支付金额必须为数字，且不能小于1”）；
返回；
}
var amountPaidOfIndex=parseFloat（document.getElementById（'amountpaid'+lastIteminarayIndex）.value）；
var newSubTotal=指数小计-数量PaidOfIndex；
//lastindex中tobalance的设置值
document.getElementById（'tobalance'+lastIteminarayIndex）。value=newSubTotal；
如果（新总数<1）{
如果（确认（'没有未清余额，是否仍要继续添加新行？'））{
//开始添加另一行
self._addRowHelper（newSubTotal，''，''）；
//结束添加另一行
返回；
}否则{
返回；
}
}
//开始添加另一行
self._addRowHelper（newSubTotal，''，''）；
//结束添加另一行
返回；
},
removeRow:函数（idx）{
self=这个；
if（self.maincartsection.splitpaymentformitems.items.length<1）{
警报（“列表为空”）；
返回；
}
LastIteminarayIndex=self.maincartsection.splitpaymentformitems.items.length-1；
//删除顶部项目下方的其他项目
如果（LastIteminarayIndex==idx）{
self.maincartsection.splitpaymentformitems.items.splice（idx，1）；
if（self.main）部分。
//Start Modal

    onGetModalAddRow: function (modalformdatasection) {
        self = this;
        //Empty previous modalformdata array, then Add new rows for current form data
        self.validations.fieldstatuslogs = [];
        self.maincartsection.splitpaymentformitems.items = [];
        self.maincartsection.splitpaymentformitems.id = 0;


        //Start splitpayments
        if (modalformdatasection == "splitpayments") {

            self._addRowHelper(self.computeCustomerSubTotal, self.computeCustomerSubTotal, self.computeToBalance, '');

        }
        //End splitpayments

    },
    //End Modal

    //Start addRow Helper Function
    _addRowHelper: function(newSubTotal, amountpaid, tobalance,  paymentmethod){

        //START ADD ANOTHER ROW
        self.maincartsection.splitpaymentformitems.items.push({ id: self.maincartsection.splitpaymentformitems.id++, subtotal: newSubTotal, amountpaid: amountpaid, tobalance: tobalance, paymentmethod: paymentmethod });

        self.validations.fieldstatuslogs.push({
            subtotal: {
                is_valid: true,
                text: ''
            },
            amountpaid: {
                is_valid: true,
                text: ''
            },
            tobalance: {
                is_valid: true,
                text: ''
            },

            paymentmethod: {
                is_valid: true,
                text: ''
            },
        });
        //END ADD ANOTHER ROW

    },
    //End addRow Helper Function




                //START SPLIT PAYMENT - addRow Function
    addRow: function(){

    self = this;
    var lastiteminarrayIndex = '';

    if(self.maincartsection.splitpaymentformitems.items.length < 1){
     // alert('First Item Added');
     //Disable Amount Paid Feild
        //document.getElementById('customer_amount_paid').focus();

     //self.splitPaymentClicked = true;
     self.maincartsection.splitpaymentformitems.splitPaymentStatus = 1;
      //Initialize First Item Value with Cart Value

    //Call onGetModalAddRow Function to Initialize First Item Value with Cart Value
    self.onGetModalAddRow('splitpayments');

      return;
    }

    lastiteminarrayIndex = self.maincartsection.splitpaymentformitems.items.length-1;
    var subTotalOfIndex = parseFloat(document.getElementById('subtotal'+lastiteminarrayIndex).value);

    if(!parseFloat(document.getElementById('amountpaid'+lastiteminarrayIndex).value )){
      alert('Amount Paid must be a Number and Can not be less than 1');
      return;
     }

    var amountPaidOfIndex = parseFloat(document.getElementById('amountpaid'+lastiteminarrayIndex).value);



    var newSubTotal = subTotalOfIndex - amountPaidOfIndex;

    //set value of tobalance in lastindex
    document.getElementById('tobalance'+lastiteminarrayIndex).value = newSubTotal;

    if(newSubTotal < 1){
      if(confirm('There is No Outstanding Balance, Do you still want to proceed to add a new row? ')){

        //START ADD ANOTHER ROW
        self._addRowHelper(newSubTotal,'','','');
        //END ADD ANOTHER ROW
        return;

      }else{          
        return;
      }
    }

    //START ADD ANOTHER ROW
    self._addRowHelper(newSubTotal,'','','');
    //END ADD ANOTHER ROW
    return;

  },


removeRow: function(idx){

    self = this;
    if(self.maincartsection.splitpaymentformitems.items.length < 1){
      alert('List is Empty');
      return;
    }

    lastiteminarrayIndex = self.maincartsection.splitpaymentformitems.items.length-1;

      //REMOVE OTHER ITEMS BELOW TOP ITEM
      if(lastiteminarrayIndex == idx){
        self.maincartsection.splitpaymentformitems.items.splice(idx, 1); 

        if(self.maincartsection.splitpaymentformitems.items.length < 1){
          //self.splitPaymentClicked = false;
         // self.maincartsection.splitpaymentformitems.splitPaymentStatus = 0;
         // document.getElementById('customer_amount_paid').focus();  
           return;
         }


      }else{
        self.maincartsection.splitpaymentformitems.items = [];
       // self.splitPaymentClicked = false;
       // self.maincartsection.splitpaymentformitems.splitPaymentStatus = 0;
       // document.getElementById('customer_amount_paid').focus();
      }
      return;
      //END REMOVE OTHER ITEMS BELOW TOP ITEM

  },