Пытаюсь реализовать фильтрацию элементов на странице. Что я имею - три кнопки, по нажатию на которые должна происходить фильтрация.
<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 полный ноль :/