Как фильтровать с 2 или более условиями в laravel и vue js

он использует модель для таблицы PayrollOfficeDeail.php в приложении/Моделях laravel 8.x

use Illuminate\Database\Eloquent\Model
class payroll_office_detail extends Model{
   public scopeSearch(Builder $query,$fieldName,$fieldVal){
        return $query->where($fieldName,'=',$fieldVal);
   }
}

в файл контроллера добавить

public function search(Request $request){
$searchFieldName=$request->get('field');
$payroll_office_detail=payroll_office_detail::query();
$payroll_office_detail
   ->leftJoin()
//   -> ....


$payroll_office_detail->search($searchFieldName,'%'.$request->get('q').'%');

return $payroll_office_detail->get();
}

Я использую этот код для нескольких комбинаций поисковых фильтров, пожалуйста, посмотрите, я надеюсь, что это поможет вам. Я стараюсь делиться всем, чем могу.

 public function customUserSearchv2(Request $request) {
        try {
            $the = new Profile();
            $the = $the->newQuery();

            $the->leftJoin('tbl1', 'tbl1.id', '=', 'profile.id');

            if ($request->has('thrapyType') && !empty($request->thrapyType)) {
                $the->where('profile.services', 'LIKE', '%' . $request->thrapyType . '%');
            }

            if ($request->has('the_name') && !empty($request->the_name)) {

                $full_name = explode(" ", $request->the_name);

                $f_name = $full_name[0];
                $the->where('profile.first_name', 'LIKE', '%' . $f_name . '%');
                if (count($full_name) > 1) {
                    $l_name = $full_name[1];
                    if (!empty($l_name)) {
                        $the->orWhere('profile.last_name', 'LIKE', '%' . $l_name . '%');
                    }
                }
            }
            if ($request->has('zipcode') && !empty($request->zipcode)) {
                $the->where('profile.office_address_zip', 'LIKE', '%' . $request->zipcode);
                //$the->orWhere('profile.secondary_address_zip', 'LIKE', '%' .$request->zipcode);
            }
            
            $result = $the->select('profile.*', 'tbl1.name', 'tbl1.email',)->orderBy('profile.id', 'DESC')
                    ->get();

            return apiSuccessHandler($result, 200, "SUCCESS", $request, 'Search completed successfully.');
        } catch (\Exception $e) {
            return apiErrorHandler(500, "INTERNAl SERVER ERROR", $e->getMessage() . ':' . "Server Error Please try after sometime.", $request);
        }
    }

Вью JS

<template>
                <label>User Name</label>
                <input type = "text" @keyup = "list($event)" name = "tname" v-model = "tname"/>
                
                
                <label>Provider</label>
                <select @change = "list($event)" name = "provider_type" v-model = "provider">
                  <option value selected>Select Provider</option>
                  <option v-for = "(ins,index) in provider_type.data" :key = "index" :value = "ins.provider_name">
                    {{ins.provider_name}}
                  </option>
                </select>

         <div class = "th-fimg" v-for = "(therapist,index) in filterList.data" :key = "index"></div>  
</template>

    <script>
    export default{
    data(){
    return{
      filtered_data: [],
    }
    }
    methods:{
          list(e) {
            let name = "";
              name = this.tname;
              provider = this.provider
            this.$axios
              .get("user/search/v2", {
                headers: apiConst._header,
                params: {
                  name:name,
                  provider: provider
                }
              })
              .then(rec => {
                if (rec.data.data.length <= 0) {
                  this.message = true;
                } else {
                  this.message = false;
                }
                this.filtered_data = rec.data;
              })
              .catch(err => {
                console.info("Filter Error : 207");
              });
          }
    }, computed: {
          filterList() {
            return this.filtered_data;
          }
        }
    }
    </script>