使用keyup vuejs和laravel后端api搜索

Question

我想通过输入公司名称而不是公司ID通过搜索从Employee和Company这两个表中获取数据，这些表与一字托关系相关联。它们的其余搜索功能运行良好。任何帮助将不胜感激。

EmployeeController中的代码为：

public function search(){

       if($search = \Request::get('q')){

             $employees = Employee::with('company')->where(function($query) use ($search){
                  foreach($employees->company AS $company){ 
                     $searcompany = $company->Company;
                }
                $query->Where('BadgeCode','LIKE',"%$search%")
                 ->orWhere($searcompany,'LIKE',"%$search%")
                ->orWhere('tazker','LIKE',"%$search%")
                ->orWhere('lastname','LIKE',"%$search%")
                ->orWhere('firstname','LIKE',"%$search%")
                ->orWhere('serialnumber','LIKE',"%$search%")
                 ->orWhere('BadgeType','LIKE',"%$search%");
            })->orderBy('BadgeCode','desc')->paginate(20);

        }        else{
           $employees = Employee::latest()->paginate(5);
                     }
         return $employees;

    }

Employee.vue中的代码为：

<div style="margin-left:450px; margin-top:0px;margin-bottom:-10px;">
              <h3 class="card-title">
                <div class="card-tools">
                  <div class="input-group input-group-sm" style="width: 250px;">
                    <input
                      name="table_search"
                      class="form-control float-right"
                      placeholder="Search"
                      @keyup="searchit"
                      v-model="search"
                      type="search"
                      aria-label="Search"
                    />
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-default" @click="searchit">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </h3>
            </div>

Employee.vue中的脚本代码为：

 export default {
    data() {
        return {
employees :{},
     search: "",
    },
        methods: {
            searchit: _.debounce(() => {
              Fire.$emit("searching");
            }, 300),
    },

    created() {
        Fire.$on("searching", () => {
          let query = this.search;
          axios
            .get("api/findemployee?q=" + query)
            .then(data => {
              this.employees = data.data;
            })

            .catch(() => {});
        });
    }
    }

API Rout为：

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

Answer 1

尝试.catch((e) => {console.log(error)});，我认为它将帮助您了解错误