Proyecto cliente SPA para la API de películas con Nuxt.js

Buscador de películas por título

Lo último que nos falta en la portada sería añadir un pequeño buscador por título. La API que creamos cuenta un sistema de búsqueda así que podríamos hacer uso de él.

Vamos a empezar creando una variable reactiva para controlar un input de texto:

pages/index.vue

data() {
  return {
    searchText: ''
  };
},

El formulario que manejará esta parte tendrá in input con un v-model que enlazará esta variable, y además un par de botones para buscar y reiniciar el filtro, podéis copiarlo tal cual:

<!-- Empieza la parte de la búsqueda -->
<div class="columns">
  <div class="column">
    <form action="" v-on:submit.prevent="search">
      <b-input
        type="text"
        id="searchInput"
        v-model="searchText"
        placeholder="Filtro por título"
        required>
      </b-input>
    </form>
  </div>
  <div class="column">
    <a class="button is-primary" @click="search">Buscar</a> &nbsp;
    <a class="button is-info" @click="clear">Limpiar</a>
  </div>
</div>
<br>
<!-- Fin de la búsqueda -->

Ahora crearemos los dos métodos que se encargarán de hacer la petición, así como desactivar el input, algo importante sobretodo en dispositivos móviles para esconder el teclado virtual:

search () {
  this.pelis = []
  this.$el.querySelector('#searchInput').blur()  // esconder teclado
  return this.$axios.get('/peliculas/', {
    params: {
      'search': this.searchText,
      'ordering': '-favoritos'
    }
  })
  .then((res) => {
    this.pelis = res.data
  })
},
clear () {
  this.searchText = '';
  this.search()
}

Con esto tendremos el sistema de búsqueda implementado.