0
votes

I want to implement a search functionality in laravel using vue.js and i got an error

explode() expects parameter 2 to be string, object given

i stucked at it and i still cant make it work.

What im doing wrong?

Here my Controller

     public function index(Request $request)
     {
        $query = Employee::orderBy($request->column, $request->direction)
                            ->paginate($request->per_page);
        if($request->search) {
            $query->where(function($query) use ($request) {
                $query->where('emp_name', 'like', '%' . $request->search . '%')
                ->orWhere('salary', 'like', '%' . $request->search . '%');
            });
        }
        return EmployeeResource::collection($query);
     }
    

My Template

  <pre>

       <div class="form-group"> 
            <input type="text" 
                placeholder="Search" 
                v-model="query.search" 
                @keyup.enter="fetchUser()">
        </div>

  </pre>

And My Vue.js code

 <pre>

  export default {

    props: ['source'],

    mounted() {
        this.fetchUser();
    },

    data() {
        return {
            emp: [],
            columns: [                   
       'ID','Emp_name','salary','phone_number','created_at'
            ],

            query: {
                page: 1,
                column: 'id',
                direction: 'desc',
                per_page: 5,
                search: ''
            },

            pagination: {}
        }
    },

    methods: {

        prev() {
            if(this.pagination.prev) {
                this.query.page--;
                this.fetchUser();
            }
        },

        next() {
            if(this.pagination.next) {
                this.query.page++;
                this.fetchUser();
            }
        },

        fetchUser() {
            fetch(`${this.source}?column=${this.query.column}&direction=${this.query.direction}&page=${this.query.page}&per_page=${this.query.per_page}&search=${this.query.search}`)
            .then(res => res.json())
            .then(res => {
                this.emp = res.data;            
                this.pagination = {
                    prev: res.links.prev,
                    next: res.links.next,
                }
            })

        },

        toggleOrder(column) {
            if(column == this.query.column) {
                if(this.query.direction === 'desc') {
                    this.query.direction = 'asc';
                } else {
                    this.query.direction = 'desc';
                } 
            } else {
                this.query.column = column;
                this.query.direction = 'asc';
            }

            this.fetchUser();
        }

      }
  }
 </pre>

I'll appreciate of all your help, Thanks you!!

1
can you provide more code? does it give a file name or line number where you are using .explode?CodeBoyCode
bro, i didnt use explodelatenight
But something you are calling does! And that will be identified by looking at ALL the error message and not just a summary. There should be a code file name and a line numberRiggsFolly
move the ->paginate($request->per_page); call to the end of the query.Wouter Van Damme

1 Answers

0
votes

You're executing your query here

$query = Employee::orderBy($request->column, $request->direction)
                            ->paginate($request->per_page);

Meaning you have a result here, not a query builder instance anymore. You have to move paginate() after the search queries to make it work.

     public function index(Request $request)
     {
        $query = Employee::orderBy($request->column, $request->direction);

        if($request->search) {
            $query->where(function($query) use ($request) {
                $query->where('emp_name', 'like', '%' . $request->search . '%')
                ->orWhere('salary', 'like', '%' . $request->search . '%');
            });
        }

        $employees = $query->paginate($request->per_page); // execute the query

        return EmployeeResource::collection($employees);
     }