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

Kitephx's avatar

How to filter data with axios laravel query builder

Hello everyone !

I am stuck at a point and want to know your point of view. I want to create a list and be able to filter the list with multi-select.

From this point, controller has been created. Below a summary of my controller

$this->per_page = 5;
 $events = Event::isActive()
                       ->whereDate('from_date', '=', $now)
                       ->whereDate('upto_date', '=', $now)
                       ->with([
                           'event_type',
                           'countries' => function ($query) {
                               $query->isActive();
                           }
                       ])
                       ->bySearch($request)
                       ->union($eventsdays)
                       ->union($eventslive)
                       ->union($eventstomorrows)
                       ->paginate($this->per_page);

return $events;

Below, my blade

<vue-evente :event="{{json_encode($events)}}" :eventid="{{$eventIDs}}" :type="{{$types}}" :tags="{{$counties}}">
</vue-evente>

and last, my vuejs

<template>
    <div>
        <multiselect
            v-model="selected"
            :options="allTags"
        >
        </multiselect>

        <multiselect
            v-model="selectedType"
            :options="types"
            :multiple="true"
        >
        </multiselect>
  <div class="test" v-for="event in filtering" :key="event.id">
     {{event.event_title}}
  </div>
</template>
<script>
 props: {
            'tags': {
                required: true,
                default() {
                    return '';
                }
            },
            'type': {
                required: true,
                default() {
                    return '';
                }
            },
            'eventid': {
                required: true,
                default() {
                    return '';
                }
            }
        },
const events = [];
            const allTags = this.tags;
            const eventIDs = this.eventid;
            const types = this.type;

            return {
                dateFormatConfig: {
                    monthNames: [
                        'January', 'February', 'March', 'April', 'May', 'June',
                        'July', 'August', 'September', 'October', 'November', 'December'
                    ],
                    monthNamesShort: [
                        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                    ]
                },
                selected: null,
                selectedType: null,
                eventFound: 1,
                eventIDs,
                events,
                pagination: {},
                allTags,
                types,
                paginate: ['events']
            }
computed: {
            filtering: function () {

                let groups = this.events.data;


                if ((this.selected)) {

                    groups = groups.filter((event) => {
                        return event.countries[0].country_name.includes(this.selected);
                    })
                }

                if (this.selectedType) {

                    let types_filters = this.selectedType;
                    let activeEvent = [];
                    groups.forEach(function (group) {

                        function eventTypeFilter(filter) {
                            return group.event_type.type_name.indexOf(filter);
                        }


                        if (types_filters.every(eventTypeFilter) == 0) {
                            activeEvent.push(group);
                        }
                    });

                    if (activeEvent.length != 0)
                        groups = activeEvent;
                }
                return groups;
            }
        }
</script>

Everything has not been paste, this is just a summary. From now, when I filter by tags, only 5 elements is filtering (due to pagination), what I want is to filter all data and paginate 5 by 5 (with ajax, no reload page).

Should I use axios in my computed filtering section, get all data and use query builder from laravel ? If yes, how should I make it ?

0 likes
0 replies

Please or to participate in this conversation.