Fetch AXIOS on vue but only the first 100-CodePudding

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 }
}

CodePudding user response：

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)

CodePudding user response：

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>