有没有办法让循环在 Vue3 中创建对象？

Question

<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 },
      ],
    };
  },

如您所见，我在“boardfields”数组中有一些类似的对象。我必须制作大约 50 个。有没有办法创建一个循环，用不同的数字创建一定数量的这个对象并将其推送到数组，这样我就不必复制和粘贴它并手动更改数字？

我认为在 JS 中它会是这样的

var i;
for (var i = 0, i > 50, i++){
  this.boardfields.push({number: i, isclicked: false});
}

Answer 1

您可以通过使用[...Array(50)]返回 50 个带有值的项目undefined然后使用map此数组返回对象数组来实现此目的，这是在mounted生命周期挂钩中完成的：

export default {
  name: "App",
  components: {},
  data() {
    return {
      boardfields: [],
    };
  },
  mounted(){
    this.boardFields=[...Array(50)].map((_,i)=>({number: i+1, isclicked: false}))
  }
}