问题:有没有办法在Vue3中循环创建对象?

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

解答

您可以通过使用[...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}))
  }
}