chrisgrim's avatar

Cant V-bind Paginated Data

Hi All, Has anyone else had an issue with V-binding paginated data? In my blade file I have

 <search-listing user="{{ auth()->id() }}" :tags="{{ $tags }}" :searchedevents="{{ $searchedevents }}" :onlineevents="{{ $onlineevents }}" :categories="{{ $categories }}" :searchedevents="{{ $searchedevents }}">

and when I try to load the file I get the error

The value for a v-bind expression cannot be empty. Found in "v-bind:searchedevents"

however if I just do a return in my controller

return $searchedevents =  Event::search('a')
            ->rule(EventMapSearchRule::class)
            ->with(['location', 'organizer'])
            ->paginate(8);

I get all the data. Also if I remove the pagination it also works.

0 likes
3 replies
neilstee's avatar

@chrisgrim is there a reason why there is a duplicate :searchedevents="{{ $searchedevents }}" ? Because that might be the issue initializing it twice.

SilenceBringer's avatar
Level 55

Hi @chrisgrim paginate returns LengthAwarePaginator instance, while get return Collection instance.

Collection has method __toString, which converts your collection to json string when you put it as param in blade. But LengthAwarePaginator doesn't. So, you need to call it manually. Try like so

:searchedevents="{{ $searchedevents->toJson() }}"
1 like
chrisgrim's avatar

@silencebringer That did the trick. Thanks so much! @neilstee I just kept them named the same as I pass the collection from laravel to vue. I'm not sure if that is bad practice or not.

1 like

Please or to participate in this conversation.