Как в Vue сделать пагинацию, сортировку, фильтрацию через axios?

Question

[Dos]

Привет! Не могу никак решить простую задачу. Нужно сделать в выводе списка мероприятий фильтрацию по полю(ям), сортировку, пагинацию.

Как сейчас выглядит мой view используя 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}`
      }
    },
  }

Пагинацию пока что сделал, но не знаю, на сколько верно. А вот фильтрацию пока не могу понять как сделать. Везде где находил примеры - они без изменения роутинга. То есть просто работают с массивом. В моём же случае нужно посылать запросы к API. Если есть где-то хороший пример - разместите ссылку. Буду очень благодарен!

Answer 1

[Олег Колтунов]

Чтобы обновлять роутер добавьте в watch отслеживание filter:
'filter.filter': function(val) { this.$route.query.filter = val }

В параметры запроса добавить filter и обрабатывайте на бэкенде.
.get('/events', { params: {page: this.$route.query.page, filter: this.filter.filter }})