在 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>

我的@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()：

 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

问题是您的表在v-for 指令中使用了employees.data。这在初始页面加载时工作正常，因为 employees 是 Laravel 分页器，所以定义了 data 属性，它包含员工数组，正如预期的那样。

但是，您的控制器函数只是返回一个员工数组。您正在将该数组保存到 Vue 实例的 employees 属性中。所以现在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]);
}