Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MochamadAkbar's avatar

How to use filter ratiw/vue-table2 with laravel api

how can i use filter vue-table2 with laravel api

in laravel api i use this

public function fetchingPage()
{
    $req = $this->request;
    
    $query = Page::where('extras', null);
    if ($this->request->has('sort')) {
        $sorts = explode(',', $this->request->sort);
        foreach ($sorts as $sort) {
            list($sortCol, $sortDir) = explode('|', $sort);
            $query = $query->orderBy($sortCol, $sortDir);
        }
    } else {
        $query = $query->orderBy('id', 'desc');
    }
    if ($this->request->exists('filter')) {
        $query->where(function ($q) use($req) {
           $value = '%{$this->request->filter}%';
           $q->where('name', 'like', $value)
           ->orWhere('template', 'like', $value)
           ->orWhere('title', 'like', $value)
           ->orWhere('slug', 'like', $value); 
        });
    }
    
    $perPage = $this->request->has('per_page') ? (int) $this->request->per_page : null;
    
    $page = $query->paginate($perPage);
    $page->makeVisible(['name', 'template']);
    return  $page;
}

sort vue-table it's work but filter get null data in network ,

here my method

  onFilterSet (filterText) {
      this.moreParams = {
          'filter': filterText
      }
      Vue.nextTick( () => this.$refs.vuetable.refresh())
  },
  onFilterReset () {
      this.moreParams = {}
      Vue.nextTick( () => this.$refs.vuetable.refresh())
  }

and here

  return {
    apiUrl: 'http://event.pro/api/v1/fetchingPage',
    sortOrder: [
      {
        field: 'name',
        sortField: 'name',
        direction: 'desc'
      }
    ],
    fields: [
      {
        name: 'name',
        sortField: 'name'
      },
      {
        name: 'template',
        sortField: 'template'
      },
      {
        name: 'slug',
        sortField: 'slug'
      },
      {
        name: '__slot:actions',
        title: 'Actions',
        titleClass: 'center aligned',
        dataClass: 'center aligned'
      }
    ],
    moreParams: {}
  }

Is the problem because I don't add params to moreParams?

if true, how do I add it to make the filter work

sorry, my English is bad. thanks.

0 likes
1 reply
MochamadAkbar's avatar

thank you all, I have solved this problem I add '%' in value and now it works.

public function fetchingPage(Request $request)
{
    $req = $this->request->filter;
    
    $query = Page::where('extras', null);
    if ($this->request->has('sort')) {
        $sorts = explode(',', $this->request->sort);
        foreach ($sorts as $sort) {
            list($sortCol, $sortDir) = explode('|', $sort);
            $query = $query->orderBy($sortCol, $sortDir);
        }
    } else {
        $query = $query->orderBy('id', 'desc');
    }
    if ($this->request->filter) {
        $query->where(function ($q) use($req) {
           $value = $this->request->filter;
           $q->where('name', 'like', '%'.$value.'%')
           ->orWhere('template', 'like', '%'.$value.'%')
           ->orWhere('slug', 'like', '%'.$value.'%'); 
        });
    }
    
    $perPage = $this->request->has('per_page') ? (int) $this->request->per_page : null;
    
    $page = $query->paginate($perPage);
    $page->makeVisible(['name', 'template']);
    return  $page;
}

Please or to participate in this conversation.