Componente de listado: v-for, Reactividad y async await en Vue - 15

▶

Lo siguiente que nosotros vamos a hacer sería iterar nuestro listado de películas.

Aquí también conocer un poco la magia de este tipo de frameworks del cliente es decir la reactividad ya que recuerda que esto se inicializa por defecto como vacío:

data() {
   return {
       movies: []
   }
},

Y en algún momento de la vida cuando se carga el componente es que se inicializa con la Data:

async created() {
    // axios.get('http://code4movies.test/api/pelicula')
    //     .then(res => this.movies = res.data)
    //     .catch(error => console.log(error))
    
    this.movies = await axios.get('http://code4movies.test/api/pelicula')
        .then(res => res.data)
        .catch(error => error)
        console.log(this.movies) // [Movie1, ... MovieN]
},

En el código anterior, podemos ver un par de variantes para obtener los datos de nuestra Rest API, para ello, podemos obtener los datos con las funciones de promesa (los then) o la combinación de asnc y await, con los cuales, podemos ‘esperar’ que termine de ejecutarse la petición/la promesa y a diferencia del ejemplo con el then, automáticamente, tenemos los datos (o un error en caso de que ocurra un error) y podemos usarlos para inicializar los datos.

Datos reactivos

Si imprimimos el array anterior, veremos algo como lo siguiente:

console.log(this.movies)


>> Proxy(Array) ...
[[Handler]]
: MutableReactiveHandler
[[Target]]
: Array(20)

Lo que significa que reactivo no que te va a matar de radiación sino es que es como que un objeto que siempre va vi a observar en base a algunas operaciones que hagamos sobre ella en el caso de los array.