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

问题是您的表正在employees.data指令中使用v-for。这在初始页面加载时效果很好，因为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]);
}

根据Laravel Vuejs Axios中的下拉列表选择的值填充表

1 个答案: