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

Question

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

Вот мой HTML-код

<div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">employees Table</h3>

        <div class="card-body">
          <div class="md-3">
            <div class="row">
              <div class="col-md-12">
                <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="getEmployeesbyCompany()"
                  >
                    <option value selected>Select Company</option>
                    <option
                      v-for="Company in Companies.data"
                      :key="Company.id"
                    >{{Company.Company}}</option>
                  </select>
                  <has-error :form="form" field="company_id"></has-error>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.card-header -->
      <div class="card-body table-responsive p-0">
        <div class="col-md-12"></div>
        <table class="table table-hover">
          <!-- <thead>

          </thead>-->
          <tbody>
            <tr>
              <th>ID</th>
              <th>Badge#</th>
              <th>Company</th>
              <th>BadgeType</th>
              <th>Nationality</th>
              <th>Last Name</th>
              <th>First Name</th>
              <th>Telphonenumber</th>
              <th>Position</th>
              <th>SupervisorName</th>
              <th>SupervisorNumber</th>
              <th>Issuedate</th>
              <th>Tazker</th>
              <th>Expiredate</th>
              <th>Serialnumber</th>
              <th>Modify</th>
            </tr>
            <tr v-for="employee in employees.data" :key="employee.id">
              <td>{{employee.id}}</td>

              <td>{{employee.BadgeCode|UppCaseFirstLetter}}</td>
              <!-- <td>{{employee.company_id}}</td> -->
              <td>{{Company.Company}}</td>
              <td>
                <span class="tag tag-success">{{employee.BadgeType}}</span>
              </td>
              <td>{{Nationality.nationality}}</td>

              <td>{{employee.lastname |UppCaseFirstLetter}}</td>
              <td>{{employee.firstname |UppCaseFirstLetter}}</td>
              <td>{{employee.telphonenumber |UppCaseFirstLetter}}</td>
              <td>{{employee.position |UppCaseFirstLetter}}</td>
              <td>{{employee.supervisorname |UppCaseFirstLetter}}</td>
              <td>{{employee.supervisornumber|UppCaseFirstLetter}}</td>
              <td>{{employee.Issuedate|mydate}}</td>
              <td>{{employee.tazker|UppCaseFirstLetter}}</td>
              <td>{{employee.Expiredate |mydate}}</td>
              <td>{{employee.serialnumber |UppCaseFirstLetter}}</td>


            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.card-body -->
      <div class="card-footer">
        <pagination :data="employees" @pagination-change-page="getResults"></pagination>
      </div>
    </div>
    <!-- /.card -->
  </div>

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

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

Маршрут:

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

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

public function getEmployees(Request $request)
{

      $employees = Employee::where('company_id',$request->company_id)->get();

     return $employees;

}

Мои данные () в компоненте 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

Проблема в том, что ваша таблица использует employees.data в директиве v-for. Это прекрасно работает при начальной загрузке страницы, потому что employees - это пагинатор Laravel, поэтому свойство data определено и, как и ожидалось, содержит массив сотрудников.

Однако ваша функция контроллерапросто возвращая массив сотрудников. Вы сохраняете этот массив в свойстве employees вашего экземпляра Vue. Так что теперь employees.data не определено, а ваша таблица пуста.

Чтобы исправить проблему, вы можете обновить функцию контроллера следующим образом:

public function getEmployees(Request $request)
{
  $employees = Employee::where('company_id',$request->company_id)->get();

  return ['data' => $employees]; // or return response()->json(['data' => employees]);
}