[Vuejs]-Fill only one textbox depending dropdown list selected value in Laravel vuejs Axios

by

0👍

You are sending BedgeCode as a parameter but you should send company id as a parameter in order to get employees and their badge code. You basically try to get BadgeCode with BadgeCode. 🙂 So it would look like something like this: 

methods: {
     getEmployeesBadgeCode: function() {
     axios.get("api/getBadgeCode", {
     params: { company_id: this.form.company_id}})
     .then( function(response) {this.employees = response.data;}.bind(this)
      );
     }

You also need to modify getBadgeCode method on back-end:

public function getBadgeCode(Request $request)
{
    $Employees= Employee::where('company_id',$request->company_id)->orderBy('BadgeCode','desc')->get(); 

    return ['data' => $Employees]; 
}

So flow goes like this: You change Company, send request with company_id, get all Employees with that company_id and get their BadgeCode.
You can access particular employee BadgeCode as: this.employees[0].BadgeCode

Edit answer on question:

So define variable in your data, called BadgeCode: 

data() {    
      return {      
              BadgeCode:"",
              editMode: false,
              selectedTicketInvoiceId: false,
              Companies: {},

              Nationalities: {},
              employees: {},
              form: new Form({id: "",BadgeCode: "",BadgeType: "",company_id: "",
                               nationality_id: "",lastname: "",firstname: "",telphonenumber: "",
                               position: "",supervisorname: "", supervisornumber: "",
                               issuedate: "",tazker: "", expiredate: "", serialnumber: "" })};
 }

Then assign value to it in your response function:

methods: {
     getEmployeesBadgeCode: function() {
     axios.get("api/getBadgeCode", {
     params: { BadgeCode: this.form.BadgeCode}})
     .then( function(response) {this.BadgeCode = response.data[0].BadgeCode;}.bind(this)
      );
     }

And set v-model in your input field to BadgeCode: 

<div class="form-group">
            <input
              v-model="BadgeCode"
              placeholder="Enter BadgeCode"
              type="text"
              name="BadgeCode"
              class="form-control"
              :class="{ 'is-invalid': form.errors.has('BadgeCode') }"
            />

Leave a comment