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

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

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 作为参数发送，但您应该将公司 ID 作为参数发送，以便获取员工及其徽章代码。您基本上尝试使用 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：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-model 设置为 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') }"
            />