Laravel and VueJS select depending of another select

HTML

<select class="form-control" data-selectField="sales_invoices_customer_id" id="sales_invoices_customer_id" v-model="form.sales_invoices_customer_id" @change="loadSalesMan()"  >
   <option v-for="(cvalue,cindex) in customer_lists" :value="cvalue.id" > {{cvalue.sales_customer_name}}</option>
</select>

<select disabled class="form-control" data-selectField="sales_man_id" id="sales_man_id" v-model="form.sales_man_id" >
  <option v-for="(value,index) in sales_man_lists" :value="value.id" > {{value.sales_man_name}}</option>
</select>

Vue Js:

data:function(){
     return{
        sales_man_lists: {},

     form:{
          sales_invoices_customer_id: '',
          sales_man_id: '',
      },

    };

 methods:{

loadSalesMan(){
     var _this = this;
     var id= this.form.sales_invoices_customer_id;

     axios.get(base_url+"sales-invoice/"+id+"/sales-man-list").then((response) => {

      if(response.data.length > 0){
          console.log(response.data);
           this.sales_man_lists = response.data;
     document.getElementById("sales_man_id ").disabled = false;

           setTimeout(function () {

      var Select2= {init:function() {$(".select2").select2( {placeholder:            "Please select an option"})}};
      jQuery(document).ready(function() {Select2.init()});

     },100);

       }
    });
  },
},

 mounted(){
      var _this = this;

        $('#addComponent').on('change', '.select2', function (e) {
          var selectedType = $(this),
          curerntVal = !!selectedType.val(),
          dataIndex = $(e.currentTarget).attr('data-selectField');
          if(dataIndex == 'sales_invoices_customer_id'){
              _this.form.sales_invoices_customer_id = selectedType.val();
              _this.loadSalesMan();
          }else if(dataIndex == 'sales_man_id'){
              _this.form.sales_man_id = selectedType.val();
             
      });

},

Database:

Route:

 Route::get('sales-invoice/{id}/sales-man-list','Sales\SalesInvoiceController@getSalesManList');


Controller :

public function getSalesManList($customer_id){

   $salesManDetails = CustomerShopsSalesMan::where('customer_shops_id',$customer_id)->get();
   return $salesManDetails;
}

Dynamic table rowspan in vue.js

<template >
     <tr v-for="(item, i) in list"> 
       <td
         :rowspan="item.same_num"
         v-if="!i? true:item[i-1].date==item[i].date? '':true"
         class="text-center"
         v-text="item.date"
       ></td>
     </tr>
   </template>

Laravel from_date & to_date report generate.

HTML

<div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="box box-primary boxbg">
<div class="box-header with-border">
<div class="box-tools pull-right">
<button class="btn btn-success" id="show"><i class="fa fa-angle-down" aria-hidden="true"></i>  </button>
<button style="display: none" class="btn btn-success" id="hidden"><i class="fa fa-angle-up" aria-hidden="true"></i> </button>
</div>
<h4>Filter</h4>
            </div>
       
<div id="searchBox" class="box-body">
<div class="col-sm-12 col-md-12">
<div class="col-sm-5 col-md-5">
<label class="col-sm-3 col-md-4 control-label">From Date</label>
<div class="col-sm-8 col-md-8">
<input type="text" class="form-control dateFiled" placeholder="Select From Date" id="from_date">
</div>
</div>
<div class="col-sm-5 col-md-5">
<label class="col-sm-3 col-md-4 control-label">To Date</label>
<div class="col-sm-8 col-md-8">
<input type="text" class="form-control dateFiled" placeholder="Select To Date" id="to_date">
</div>
</div>
<div class="col-sm-1 col-md-1">
<input type="button" id="filter" class="btn btn-primary btn-sm" value="Filter">
</div>
</div>
</div>


          </div>
        </div><!--/.col (left) -->

      </div>   <!-- /.row -->
 
  <div class="row">
        <div class="col-xs-12">
          <div class="boxbg">
            <div class="box-body">
<h4 align="center"><?php echo $page_title;?></h4>

            <table class="table table-bordered">
                <thead>
<tr>
<th width="60%">Account</th>
<th width="20%">Debit</th>
<th width="20%">Credit</th>
</tr>
                </thead>
                <tbody id="reportTable">
                </tbody>                 
            </table>

            </div>
          </div>
        </div>
      </div> 
 
    </section><!-- /.content -->
  </div><!-- /.content-wrapper -->


JS

<script type="text/javascript">

jQuery(function(){

$( "#show" ).click(function() {
$( "#hidden" ).toggle();
$( "#show" ).toggle();
$( "#searchBox" ).slideToggle(800);
});

$( "#hidden" ).click(function() {
$( "#hidden" ).toggle();
$( "#show" ).toggle();
$( "#searchBox" ).slideToggle(800);
});


$('#filter').on('click', function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();

$.ajax({
url : "<?php echo base_url();?>accounts/report/TrialBalance",
type : "POST",
dataType : "JSON",
data : {
"from_date" : from_date,
"to_date" : to_date,
},
success : function(response){
var tableFormat = "";
var totalDebit = 0;
var totalCredit = 0;
$.each(response, function(key, value){
// console.log(value);

tableFormat += "<tr>";
tableFormat += "<td>"+value.title+"</td>";



if(value.balance == 'debit' || value.total_debit > '0.00'){
var totalAmount = value.total_debit - value.total_credit;

if(totalAmount < 0) {
tableFormat += "<td>0.00</td>";
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
totalCredit += Math.abs(totalAmount);
}else{
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
tableFormat += "<td>0.00</td>";
totalDebit += Math.abs(totalAmount);
}

}else if(value.balance == 'credit' || value.total_credit > '0.00'){
var totalAmount = value.total_credit - value.total_debit;

if(totalAmount < 0) {
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
tableFormat += "<td>0.00</td>";
totalDebit += Math.abs(totalAmount);
}else{
tableFormat += "<td>0.00</td>";
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
totalCredit += Math.abs(totalAmount);
}

}


// tableFormat += "<td>"+totalAmount+"</td>";
// tableFormat += "<td>0.00</td>";

tableFormat += "</tr>";

})

tableFormat += "<tr style='background:#eaeaea'><td>Total</td><td>"+totalDebit+"</td><td>"+totalCredit+"</td></tr>";



$('#reportTable').html(tableFormat);

}
})
})

});

</script>

How do Vue JS - Bootstrap Datepicker ?

Vue JS - Bootstrap Datepicker

HTML

<div class="m-form__group m-form__group">
    <label class="m-label m-label--single">From Date:</label>
    <div class="input-group date">
   <input type="text" class="form-control  datepicker " v-model="form.from_date" id="from_date" />
        <div class="input-group-append">
         <span class="input-group-text">
            <i class="la la-calendar-check-o"></i>
         </span>
       </div>
     </div>
</div>

 JS
      mounted(){
            var _this = this;
            $(document).on("focus", ".datepicker", function () {
                $(this).datepicker({
                    format: 'dd/mm/yyyy',
                    todayHighlight: true,
                    clearBtn: true,
                }).on('changeDate', function (ev) {

                    $(this).datepicker('hide');
                    var dateField = $(this).attr('id');

                    if (ev.date == undefined) {
                        if (dateField == 'from_date') {
                            _this.form.from_date = '';
                        }
                    } else {
                        if (dateField == 'from_date') {
                            _this.form.from_date = moment(ev.date).format('YYYY-MM-DD');
                        }
                    }
                });
            });
        },

How do I format date in a Vue component?

I would write method for that, and then where you need to format number you can just put method in template and pass value down 

methods:{

          format_date(value){
               if (value) {
                  return moment(String(value)).format('MM/DD/YYYY')
                   } 
             },

            format_time(row){

              if (row) {

                return moment(String(row)).format('h:mm A')

                } 

          },

     }

And then in template:

<template>
    <div>
        <div class="panel-group"v-for="(value,index) in list">
            <div class="col-md-8">
                <small>
                   <b>{{format_date(value.date) }}</b>
                </small>

                 <small>
                   <b>{{format_time(row.date) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>


OR

date: { label: 'Date',render:(data) =>{return this.format_date(data) ? this.format_date(data) : " " }  },

How do I format number in a Vue component?

I would write method for that, and then where you need to format number you can just put method in template and pass value down

methods: { 
    formatNumber(value) {
    let val = (value/1).toFixed(2).replace(',', '.')
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
   },
}


And then in template:

<template>
    <div>
        <div class="panel-group"v-for="(value,index) in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{formatNumber (value.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>