Fetch AXIOS on vue but only the first 100 - vue.js

Question

How can I fetch only the first 100 items randomly:
if I use this <ActorList v-for="actors in list" :key="actors.id" :actors= "actors"/>
from an api, my browser crashes as its too much data.
im using this under script
data() {
return {
list: []
};
},
async mounted() {
const result = await axios.get("https://api.tvmaze.com/people");
console.log(result.data);
this.list = result.data;
},
components: { ActorList }
}

Answer 1

send params for pagination in your axios request
i think there is a problem with the API but if it wasnt use computed and filter method to filter your object
somthing like this :
list.filter((a, index) => index < 10)

Answer 2

To get multiple random objects from an array, use the Array.sort() method on the array to shuffle the array elements in a random order. Then call the Array.slice() method on the shuffled array to get 100 random objects.
Live Demo :
new Vue({
el: '#app',
data: {
list: [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}, {
id: 6
}, {
id: 7
}, {
id: 8
}, {
id: 9
}, {
id: 10
}]
},
mounted() {
this.list = [...this.list].sort(() => 0.5 - Math.random());
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li v-for="actors in list.slice(0, 5)" :key="actors.id">{{ actors.id }}</li>
</div>