Setting up the check-filter component

We now have the skeleton of our movie items section, so let's turn our attention to the filters section on the right of the page.

Note that each filter is a kind of custom checkbox allowing you to check or uncheck it to filter the movie list accordingly.

We've already created a movie-filter component, but the individual filters will also be good candidates for abstraction into components because not only do they have similar markup but they also have similar state and functionality.

Component registration

One of the cool things about Vue components is that you can not only use them within a Vue instance template, but within any other component's template! You just need to make sure the component is registered - either globally or locally.

So let's register this locally by adding a components property to our movie-list component and define the new check-filter component here.

src/main.js

"movie-filter": {
  template: `
    <div id="movie-filter">
        Movie list
    </div>
  `,
  components: {
    "check-filter": {}
  }
}

Templates

The first property we'll give our check-filter component is a template. So let's give it a div and text child "Check filter" as a first try.

To use it in the movie-filter component, let's replace the div inner content and first add an h2 with text "Filter results". We'll then use the new check-filter component.

src/main.js

"movie-filter": {
  template: `
    <div id="movie-filter">
        <h2>Filter results</h2>
        <check-filter></check-filter>
    </div>
  `,
  components: {
    "check-filter": {
      template: `<div>Check filter</div>`
    }
  }
}

And here's what we now see on the page.

Genres

If you refer to the finished project, you'll see there are two types of filters - time, and genre. Let's start working on the genre filters.

In the template, we want to display is a unique title, i.e. the genre this filter corrosponds to. The filter should also have a way of filtering the data based on that genre.

How will we achieve this?

If you refer to the API data source, which is the JSON file api/data.json, you can see in the object structure a property Genre with a string of comma separated genres.

Later in the course we will build the functionality to parse and filter that data.

api/data.json

  {
    ...
    "Genre": "Documentary, History",
    ...
  },
  ...
]

We'll also need a separate check filter for each genre we want to use to filter the API data set.

To save you having to figure out which genres to include, I've provided a module file with an object containing the required genres.

It's important that you don't change the spelling of these genres as you'll see later that we'll be making a string comparison with the genre and the API data which must be exact.

src/util/genres.js

export default Object.freeze({
  ANIMATION: "Animation",
  COMEDY: "Comedy",
  CRIME: "Crime",
  DOCUMENTARY: "Documentary",
  DRAMA: "Drama",
  FANTASY: "Fantasy",
  HORROR: "Horror"
});

So, let's now go to our main file and wimport this genre module. Remember, we've got an alias to refer to the src folder.

src/main.js

import genres from "@/util/genres";

Implementing genres

Let's now add the genres to our movie filter component's state. We'll do this by adding the genres object as a property of the data object.

src/main.js

"movie-filter": {
  ...
  data: () => ({
    genres
  }),
  ...
}

Vue allows us to iterate objects as well as arrays. First, let's add some structural markup by adding a div with class filter-group.

We'll then move the check-filter inside that, and we'll add a v-for directive with genre in genres to iterate the genre object. We'll need to bind a key as well, so let's use the genre value.

src/main.js

template: `
  <div id="movie-filter">
      <h2>Filter results</h2>
      <div class="filter-group">
          <check-filter 
            v-for="genre in genres"
            v-bind:key="genre"
          ></check-filter>
      </div>
  </div>
`,

We don't yet have a mechanism for displaying the genre name, but at least we'll have made a start by creating a separate filter for each genre required.

In the next few videos, we'll make it so the filters display the name of the appropriate genre by utilizing another important component feature called "props".