How to do pagination, sorting, filtering through axios in Vue?

Question

Vue.js

Hey! I can't solve a simple problem. It is necessary to make in the output of the list of events filtering by field (s), sorting, pagination.
How my view looks now using bootstrap vue:

Template

<template>
  <div class="events">
    <div class="controls">
      <router-link to="events/create" class="btn btn-success">Добавить</router-link>
    </div>
    
    <div class="card shadow-sm mb-3">
      
      <div class="card-header pt-4">
        <b-form-group label-for="filter">
          <b-form-input
              type="search"
              placeholder="Поиск..."
              v-model="filter.filter"
              aria-describedby="filterError">
          </b-form-input>
          <b-form-invalid-feedback></b-form-invalid-feedback>
        </b-form-group>
      </div>
      
      <div class="list-group list-group-flush" v-for="item in items" v-bind:key="item.id">
        <div class="event list-group-item">
          <div class="event-list-status float-right">
            <Status v-bind:status="item.status"/>
          </div>
          <h2 class="event-list-name">
            <router-link :to="{name: 'events.show', params: {id: item.id}}">{{ item.name }}</router-link>
          </h2>
          <div class="event-list-info text-black-50 small">
            <div>Дата начала: {{ item.date.start|moment('L') }}</div>
            <div>Дата окончания: {{ item.date.end|moment('L') }}</div>
            <div>Просмотров: {{ item.counter.views }}</div>
          </div>
        </div>
      </div>
    
    </div>
  
    <b-pagination-nav :link-gen="this.setPage" :number-of-pages="pages" :limit="3" use-router></b-pagination-nav>
    
  </div>
</template>

Script

import axios from "axios";
  import Status from "../../../widgets/Event/Event/Status";
  import PaginationMixin from '../../../mixins/pagination.mixin'

  export default {
    components: { Status },
    mixins: { PaginationMixin },
    data() {
      return {
        filter: {
          filter: null
        },
        items: [],
        loading: false,
      }
    },
    watch: {
      '$route' () {
        this.findEvents();
      }
    },
    mounted() {
     this.findEvents();
    },
    methods: {
      findEvents() {
        axios
          .get('/events', { params: {page: this.$route.query.page}})
          .then(response => {
            this.page = response.data.pagination.page;
            this.pages = response.data.pagination.pages;
            this.items = response.data.items;
          });
      },
      setPage(page) {
        return page === 1 ? '?' : `?page=${page}`
      }
    },
  }

I have done pagination so far, but I don’t know how correct it is. But I still can not figure out how to do the filtering. Everywhere where I found examples - they are without changing the routing. That is, they simply work with an array. In my case, you need to send requests to the API. If there is a good example somewhere, please post a link. I will be very grateful!

Answer 1

To update the router, add tracking filter to watch:
'filter.filter': function(val) { this.$route.query.filter = val }
Add filter to query parameters and process on the backend.
.get('/events', { params: {page: this.$route.query.page, filter: this.filter.filter }})