2

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

<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 полный ноль :/

1 ответ 1

2

В первую очередь, стоит перенести получение списка учителей на 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>
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.