Сортировка элементов в Vue

268

26 октября 2017, 10:34

Пытаюсь реализовать фильтрацию элементов на странице. Что я имею - три кнопки, по нажатию на которые должна происходить фильтрация.

<div class="case page__filter">
    <h1 class="page__title">Наши <br>преподаватели</h1>
    <div class="page__filter-switch">
        <span class="page__filter-item">Школы</span> <!-- is_school -->
        <span class="page__filter-item">Сады</span> <!-- is_kindergarten -->
        <span class="page__filter-item">Все преподаватели</span>
    </div>
</div>

Есть сами преподаватели, приходят с сервера в виде массива объектов (использую laravel и шаблонизатор-blade, к слову), соответственно, есть доступ к свойствам is_kindergarten и is_school каждого учителя.

Ну и blade-шаблоны - index

@isset($teachers)
    <div data-teachers-row class="teachers__row">
         @foreach($teachers as $teacher)
             @include('face.teachers.teacher', ['item' => $teacher])
         @endforeach
    </div>
@endisset

и face.teachers.teacher (тот, который инклудится)

<a href="#" class="teachers__box">
    <div class="teachers__img img-responsive">
        <img src="{{ Storage::url($item->image) }}" alt="">
    </div>
    <h4 class="teachers__name">{{ $item->name }} <span class="ui-icon icon icon-video"></span></h4>
    <p class="teachers__role">bla-bla-bla</p>
    <div class="teachers__link">Узнайте о {{ $item->name }} больше</div>
    <!-- Можно использовать $item->is_kindergarten (0 или 1) и со school аналогично -->
</a>

Вопрос - как лучше и короче всего реализовать фильтрацию? Заранее благодарю за ответ, во Vue полный ноль :/

Answer 1

В первую очередь, стоит перенести получение списка учителей на js.

Для этого Вы можете использовать axios, jquery ajax или любую другую библиотеку.

 created() { //обработчик Vue, который вызывается в конце рендеринга компонента (инстанса) Vue.js
     axios.get('/teachers')
          .then((response) => { this.teachers = response.data.teachers; })
          .catch((error) => { /* Выводим сообщение об ошибке */ });
 }

Далее, ваша фильтрация реализуется с помощью computed свойства.

Там создается функция на примере:

teachers() {
    return this.teachers.filter((teacher) => {
        if(this.filter === 'kinder') return teacher.is_kindergarten;
        if(this.filter === 'school') return teacher.is_school;
        return true;
    });
}

Потом просто создаете функцию filterBy в секции methods

filterBy(option) {
   this.filter = option;
}

И вешаете её на обработчик @click

<div class="case page__filter">
    <h1 class="page__title">Наши <br>преподаватели</h1>
    <div class="page__filter-switch">
        <span @click="filterBy('school')" class="page__filter-item">Школы</span> <!-- is_school -->
        <span @click="filterBy('kinder')" class="page__filter-item">Сады</span> <!-- is_kindergarten -->
        <span @click="filterBy('all')" class="page__filter-item">Все преподаватели</span>
    </div>
</div>