Listing Component: v-for, Reactivity and async await in Vue - 15

We are going to learn how to use v-for, and also learn how to use async and await.

The next thing we are going to do is iterate our list of movies.

Here we will also learn a little about the magic of this type of client frameworks, that is, reactivity, since remember that this is initialized by default as empty:

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

And at some point in life when the component is loaded is that it is initialized with the 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]
},

In the code above, we can see a couple of variants to obtain the data from our Rest API, to do this, we can obtain the data with the promise functions (the then) or the combination of asnc and await, with which, we can 'wait' for the request/promise to finish executing and unlike the example with the then, automatically, we have the data (or an error in case an error occurs) and we can use it to initialize the data.

Reactive data

If we print the above array, we will see something like the following:

console.log(this.movies)


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

What this means is that the reagent is not going to kill you with radiation, but rather it is like an object that will always be observed based on some operations that we perform on it in the case of arrays.

21-02-2025 - Andrés Cruz

En español

• Category
• /
• CodeIgniter
• /
• Listing Component: v-for, Reactivity and async await in Vue - 15