I am completely new to Vue and in one of my projects, I need to generate an array of objects based on a specific number. For instance, if the total length value is 3, then I want to create fetchList1, fetchList2, and fetchList3. If the total length value is 2, then it should only create fetchList1 and fetchList2.
The total length value is retrieved from the database, so it can range anywhere from more than 50 to less than 5.
VIEW
<div id="app">
<button @click="grabTeams()">
CLICK ME
</button>
</div>
Method
new Vue({
el: "#app",
data: {
totalLength: '3',
fetchList1: '',
/** Automatically creates fetchList1, fetchList2, and fetchList3 if the total length is 3 **/
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
grabTeams(){
console.log('Total value length ' +this.totalLength);
for(let b=0; b < this.totalLength; b++){
console.log('value of '+b);
var replyDataObj1 = parseInt(b);
replyDataObj1={
"id" : b
}
this['fetchList'+b] = replyDataObj1;
}
},
}
})
Check out the link to my attempt on jsfiddle below