I am making async promise that supposed to map in vuejs. I simply need to limit the request to the first 10 items…just a way to limit so it doesnt go through all results. The method i want to limit is getCodeLinkage2
new Vue({
el: "#app",
data: {
box:[],
Modules:[],
},
mounted:function(){
getCodeLinkage2();
},
methods: {
async getCodeLinkage2() {
const data = await Promise.all(this.Modules.map(Modules => this.request('GET', `https://example.com/${Modules.Identifier}/content/voc`)));
data.forEach(item => {
alert("data");
this.box.push(item);
});
console.log(this.box);
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="mod in Modules">
{{ mod.Code}}<br>
{{ mod.Identifier}}
</li>
</ul>
</div>>Solution :
You should filter out the first 10 items before requesting the data. i in this case is the index, we only look at items in the Modules array that have an index in the array smaller than our cutoff.
const cutoff = 10
const data = await Promise.all(
this.Modules
.filter((_,i) => i < cutoff)
.map(Modules => this.request('GET', `https://example.com/${Modules.Identifier}/content/voc`)));