Currently, I am retrieving data from an API using jQuery's getJson method to extract the information. After successfully obtaining the data, my aim is to assign it to a Vue array object by making use of app.$set.
Although I have managed to extract and store the data in the array, I am facing a limitation where I can only access one item at a time.
<div id="app">
<div v-once id="movies">
{{movieCall()}}
</div>
<div v-for="(movie,index) of movies" class="card" style="width: 18rem;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<div class="card-title">{{movie}}</div>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
movies: [
],
},
methods:
$.getJSON("https://api.themoviedb.org/3/movie/now_playing?api_key=9d9f46b8451885697e5cf7d1927da80f", function (movie) {
for (let i = 0; i < 3; i++) {
app.$set(app.movies, i, movie.results[i].title);
}
for (var x = 0; x < app.movies.length; x++) {
console.log(app.movies[x])
}
})
},
My current approach involves extracting the movie titles and directly assigning them to the movie array. However, I would prefer to set up the array as an object with keys like title, description, etc., so that I can reference them more intuitively in my v-for loop.
app.$set(app.movies.title, i, movie.results[i].title);
app.$set(app.movies.description, i, movie.results[i].description);
etc.
This way, my movie array would be structured as:
movie[
{title:}
{description:}
]
And then I could iterate through it like this:
<div v-for(movie, index) of movies>
<div class="titles">
{{movie.title}}
</div>
<div class="descriptions">
{{movie.description}}
</div>
</div>