Vue tutorial: Filtrar por género

api.js

//src/services/api.js

import axios from 'axios'

const host = 'https://api.themoviedb.org/3'
const apiKey = 'api_key=400b1e890742cab1385d0728152a050f';

export default {
  getMovies() {
    return axios.get(`${host}/discover/movie?${apiKey}`)
      .then(function (response) {
        return response.data.results;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  getGenres() {
    return axios.get(`${host}/genre/movie/list?${apiKey}`)
      .then(function (response) {
        return response.data.genres;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

Dropdown.vue

<template>
  <div>
    Filter by genre:
    <select @change="selectGenre" :value="selected">
      <option v-for="item in items" :value="item.id">
        {{item.name}}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: ['items', 'selected'],
  methods: {
    selectGenre($event) {
      this.$emit('update:selected', $event.target.value)
    }
  }
}
</script>

Home.vue

<template>
  <div>
    <dropdown :items="genres" :selected.sync="selectedGenre"></dropdown>

    <article v-for="movie in filteredMovies">
      <img :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`" alt="">
      <h4>{{ movie.title }}</h4>
      <p>{{movie.vote_average}}</p>
    </article>
  </div>
</template>

<script>
import api from '@/services/api'
import dropdown from './Dropdown'

export default {
  data () {
    return {
      movies: [],
      genres: [],
      selectedGenre: null
    }
  },
  components: {
    dropdown
  },
  created() {
    api.getMovies().then(data => {
      this.movies = data
    })
    api.getGenres().then(data => {
      this.genres = data
    })
  },
  computed: {
    filteredMovies() {
      if (this.selectedGenre) {
        const genre = parseInt(this.selectedGenre)

        return this.movies.filter( movie => {
          return movie.genre_ids.indexOf(genre) !== -1
        })
      } else {
        return this.movies
      }
    }
  }
}
</script>