Заполните только одно текстовое поле в зависимости от выбранного значения выпадающего списка в Laravel vuejs Axios

Question

Я пытаюсь автоматически заполнить текстовое поле только BadgeCode из базы данных с выбранным значением в раскрывающемся списке. Я очень новичок в этом. Если кто-нибудь может помочь мне выбраться из этой проблемы, я буду очень благодарен. Спасибо.

Вот мой HTML-код

 <form @submit.prevent="editMode ? updateemployee() : createemployee()">
        <div class="modal-body">
          <div class="form-group">
            <select
              name="company_id"
              id="company_id"
              :class="{'is-invalid':form.errors.has('company_id')}"
              class="form-control"
              v-model="form.company_id"
              @change="getEmployeesBadgeCode()"
            >
              <option value selected>Select Company</option>
              <option
                v-for="Company in Companies.data"
                :key="Company.id"
                :value="Company.id"
              >{{Company.Company}}</option>
            </select>
            <has-error :form="form" field="company_id"></has-error>
          </div>
          <div class="form-group">
            <input
              v-model="form.BadgeCode"
              placeholder="Enter BadgeCode"
              type="text"
              name="BadgeCode"
              class="form-control"
              :class="{ 'is-invalid': form.errors.has('BadgeCode') }"
            />
            <has-error :form="form" field="BadgeCode"></has-error>
          </div>
      </form>

My @ change = "getEmployeesBadgeCode" метод:

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

Маршрут:

Route::get('getBadgeCode','API\EmployeeController@getBadgeCode');

Мой метод getBadgeCode () {}:

    public function getBadgeCode(Request $request)
                              {$BadgeCode = Employee::where('BadgeCode',$request->BadgeCode)
                               ->orderBy('BadgeCode','desc')->get();  return ['data' => $BadgeCode]; 
                                   }

Мои данные () в компоненте Vue:

data() {    
      return {      
               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: "" })};
 }

Answer 1

Вы отправляете BedgeCode в качестве параметра, но вы должны отправить идентификатор компании в качестве параметра, чтобы получить сотрудников и их код пропуска. Вы в основном пытаетесь получить BadgeCode с BadgeCode. :) Таким образом, это выглядело бы примерно так:

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

Вам также нужно изменить метод getBadgeCode на внутреннем сервере:

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

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

Итак, процесс выглядит так: Вы меняете компанию, отправьте запрос с company_id, получите всех сотрудников с этим company_id и получите их BadgeCode. Вы можете получить доступ к конкретному сотруднику BadgeCode как: this.employees [0] .BadgeCode

Редактировать ответ на вопрос:

Так определите переменную в ваших данных, которая называется 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: "" })};
 }

Затем присвойте ему значение в функции ответа:

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

И установите v-модель в поле ввода на 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') }"
            />