Our genre filter from the [last episode](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-04-live-filtering-with-vue-js/) is ok, but it's not great. First of all it's hard coded, so that is not good, we don't want to add new values to it every time we add a movie with a new genre.

And secondly there are some genres in it that we don't even have in our movie list. So if we choose that, we get an empty list. So that is also not the coolest.

We are going to fix all those problems using jQuery. First we are going iterate through our movies, to get available genres. And then we are going to make an array with unique genre values that we can display in our option list.

At the end we will have completely dynamic filter with all the available genres and it will populate dynamically as we add new movies and new genres.

In this episode of Drupal 8 and Vue.js learn how to make our genre filter dynamic. And for that we are going to use jQuery.

Making Filter Dynamic

First of all we are going to correct some warnings we are currently getting from Vue.js so we will get that out the way first.

Then I'm going to show you how easy it is to make a live filter for your Vue.js application. First filter is going to be free form - meaning that you just start typing stuff and Vue.js automatically filters the results.

And then we are going to make a genre filter which is going to be a list with predefined values. So that way we will be able to filter our movies by genre. Really cool stuff.

In this episode of Drupal 8 and Vue.js tutorial series we are going to create live filters for our movies app using the power of Vue.js

Tutorials tagged with: Live Filter

Get in touch