Question

我正在尝试仅用databse中的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。您可以按以下方式访问特定的员工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') }"
            />

仅根据Laravel Vue.js Axios中的下拉列表所选值填充一个文本框

1 个答案: