title: Making a request and filtering records in controller before send out to endpoint
body: <p>I have more then 8000 records in DB. I need a solid pagination and filtering functionality. To accomplish that I am trying to filter the records before paginate and send out those to endpoint. </p>
  
  <p>For example in <strong>controller</strong> I request the <code>keyword</code> and check the <code>keyword</code> using <code>→when()</code> if there is keyword then filter records with that and <code>→paginate(20)</code></p>
  
  <p>in <strong>controller</strong></p>
  
  <pre><code>public function bridal(Request $request)
  {       
  
      $keyword = $request-&gt;get("keyword");
  
      $bridals = Place::with(["plans" =&gt; function($query)
          {
              $query-&gt;orderBy("plans.plan_price");
          } 
      ])
      -&gt;whereHas("plans")
      -&gt;groupBy("address")
      -&gt;when($keyword, function($query, $keyword){
          return $query-&gt;where("city", $keyword);
      })
      -&gt;paginate(20);
  
      return $bridals;
  
  }
  </code></pre>
  
  <p><strong>Route</strong></p>
  
  <pre><code>Route::match(["GET", "POST"], "bridal", "Api\BridalController@bridal");
  </code></pre>
  
  <p>I guess everything is fine 'till here. So let's continue in <strong>frontend</strong> side. </p>
  
  <p>in vuex: <strong>Store.js</strong></p>
  
  <pre><code>state: {
      bridals: [],
      keyword: "",
  },
  mutations: {
      setBridals(state, bridal){
          state.bridals = bridal;
      },
      setKeywords(state, keys){
          state.keyword = keys;
      },
  },
  getters: {     
      getBridals(state){
          return state.bridals;
      },
  },
  actions: {
      bridalApi({commit}, payload){ 
          axios.get("api/bridal?page="+payload.page, {
              keyword: payload.forms.keyword
          })
          .then(response =&gt; {
              this.commit("setBridals", response.data);  
          })
          .catch(e =&gt; {
              console.log(e);
          })
      },
  }
  </code></pre>
  
  <p>and in <strong>home</strong> component I am sending filter params to controller. </p>
  
  <pre><code> &lt;form @submit.prevent="submit" method="post"&gt;
          &lt;search-bar /&gt;
          &lt;submit-btn /&gt;
   &lt;/form&gt;
  
  
  mounted(){
      this.$store.dispatch("bridalApi", {
          page: this.currentPage,
          forms: this.filterParams,
      });
  },
  methods: {
      submit(){
          this.$store.dispatch("bridalApi", {
              forms: this.filterParams,
          });
      },
  },  
  computed: {                
      filterParams(){
          let paramObj = {
              keyword: this.$store.state.bridal.keyword,
          }
  
          return paramObj;          
      }
  },
  </code></pre>
  
  <p>I am not sure what is wrong in the code. Where do I make mistake. </p>
  
  <p><strong>P.S</strong>: By the way I set and get the keyword <code>state.keyword</code>... it's working fine. I can get the value. I just didn't add input code here... </p>