vue.js - 有没有办法让循环在 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

我认为@Boussadjra 的回答是正确的，但想添加一些上下文。
功能[...Array(50)].map()...etc是当今流行的方式。您可以填充数据定义或 onmount 上的值或 oncreate ，有一些细微差别可能值得考虑。
请注意，如果您正在使用:

const initialBoard = []
for (var i = 1; i <= 50; i++) {
  initialBoard.push({number: i, isclicked: false});
}

export default {
  name: "App",
  components: {},

  data() {
    return {
      boardfields: initialBoard
    };
  },
}

initialBoard的值是 执着 .这些对象是在第一次运行时创建的，并填充重新使用的数组。这意味着如果您创建两个组件，它们可能会共享数组内对象的值。恕我直言，这是您想要避免的副作用，除非您明确寻找该功能，即使您只使用该组件的一个实例。
B的解决方案...

export default {
  name: "App",
  components: {},

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

在这方面更安全，因为它每次安装时都会生成一个包含新对象的新数组。我更喜欢使用 created ，因为它会在第一次绘制时提供数据，但是因为变量被预设为一个空数组，所以它不会导致错误(就像模板中的错误，如果变量有 .length 未定义或为空)
这是一个说明差异的示例。并不是说当组件被重新安装或重新创建时(在这里没有区别)数据丢失，但(顶部)两个组件不共享数据。而底部两个共享数据。

const app = Vue.createApp({
  data: function() {
    return {
      cKey: 1
    }
  }
})

const prepArr = [...Array(5)].map((_, i) => ({
  name: 'item-' + i
}))

app.component("my-component", {
  data: function() {
    return {
      myArr: []
    }
  },
  created: function() {
    this.myArr = [...Array(5)].map((_, i) => ({
      name: 'item-' + i
    }))
  },
  template: `<div class="h">Component Using created<ul>
    <li v-for="item in myArr">{{ item.name }} <button  @click="()=>{item.name = item.name +'!'}">+</button></li>
  </ul></div>`
});


app.component("persistent-component", {
  data: function() {
    return {
      myArr: prepArr
    }
  },
  template: `<div class="h">Component using persistent<ul>
    <li v-for="item in myArr">{{ item.name }} <button  @click="()=>{item.name = item.name +'!'}">+</button></li>
  </ul></div>`
});


app.mount('#app')

.h{display: inline-block; width: 49%;}

<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.prod.js"></script>

<div id="app">
  <div><button @click="()=>{cKey++}">regenerate</button></div>
  <my-component :key="cKey"></my-component>
  <my-component :key="cKey"></my-component>
  <persistent-component :key="cKey"></persistent-component>
  <persistent-component :key="cKey"></persistent-component>
</div>