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

Añadiendo el botón de acción

Vamos a hacer que funcione ese botón para manejar las películas favoritas.

Lo primero será crear un método para manejar la petición autenticada y establecer o borrar el favorito:

components/Peli.vue

methods: {
  toggleFavorite() {
    // Si estamos identificados... que lo deberíamos
    if (this.$store.state.token) {
      return this.$axios
        .post(
          "/favorita/",
          { id: this.peli.id },
          {
            headers: {
              Authorization: `Token ${this.$store.state.token}`
            }
          }
        )
        .then(res => {
          if (res.data.id) {
            this.$store.commit("toggleFavorite", res.data.id);
          }
        })
        .catch(error => {
          alert(Object.values(error.response.data));
        });
    } else {
      alert("Necesitas identificarte para marcar pelis favoritas");
    }
  }
}
<a
  class="button is-light card-footer-item"
  :class="{ 'is-primary': 
            this.$store.state.favIds.indexOf(peli.id) !== -1} "
  @click="toggleFavorite"
>

Sólo nos faltaría sumar o restar al número de favoritos dependiendo del resultado:

.then(res => {
  if (res.data.id) {
    this.$store.commit("toggleFavorite", res.data.id);
    if (res.data.favorita) {
      this.peli.favoritos += 1;
    } else {
      this.peli.favoritos -= 1;
    }
  }
})

Como podéis observar trabajar con componentes nos ahorra mucho trabajo.