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 ?
Please or to participate in this conversation.