<template>
<div class="container">
<div class="gameboard">
<div v-for="item in boardfields" :key="item.number">
{{ item.number }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
boardfields: [
{ number: 1, isclicked: false },
{ number: 2, isclicked: false },
{ number: 3, isclicked: false },
{ number: 4, isclicked: false },
{ number: 5, isclicked: false },
{ number: 6, isclicked: false },
],
};
},
As you can see I have a few similar objects in the 'boardfields' array. I have to make around 50 of those. Is there a way to create a loop that creates a certain amount of this object with a different number and pushing it to the array so I don't have to copy and paste it and manually change the numbers?
I think in JS it would be something like
var i;
for (var i = 0, i > 50, i++){
this.boardfields.push({number: i, isclicked: false});
}
You could achieve this by using [...Array(50)]
which returns 50 items with undefined
values then map
this array to return your objects array, this is done in the mounted
lifecycle hook :
export default {
name: "App",
components: {},
data() {
return {
boardfields: [],
};
},
mounted(){
this.boardFields=[...Array(50)].map((_,i)=>({number: i+1, isclicked: false}))
}
}