Vue根据循环长度生成对象数组答案

【问题标题】：Vue generate array of objects according to loop lengthVue根据循环长度生成对象数组
【发布时间】：2021-03-23 09:24:24
【问题描述】：

我对 Vue 非常陌生，对于一个项目，我正在尝试根据数字创建一组对象。例如，如果总长度值为 3，那么有没有办法创建 fetchList1、fetchList2 和 fetchList3？如果总长度值为 2，则应将数据返回对象创建为 fetchList1 和 fetchList2。

我从数据库中获取总长度值，因此它有时可能大于 50 或小于 5。

查看

<div id="app">
  <button @click="grabTeams()">
   CLICK ME
  </button>
</div>

方法

new Vue({
  el: "#app",
  data: {
    totalLength: '3',
    fetchList1: '', 
/** if the total length is 3 then it should automatically create fetchList1, fetchList2 and fetchList3 **/
  },
  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;
        }
      }, 
  }
})

下面是我在 jsfiddle 上试过的链接

https://jsfiddle.net/ujjumaki/8xq9wn1m/14/

【问题讨论】：

标签： javascript arrays vue.js vuejs2 vue-component

【解决方案1】：

如果您尝试动态添加根数据属性，Vue 会抛出警告。来自docs：

Vue 不允许向已创建的实例动态添加新的根级反应属性。

改为创建一个fetchList 数组：

data() {
   return {
      fetchList: []
   }
}

添加到它：

for(let b = 0; b < this.totalLength; b++){
   this.$set(this.fetchList, b, {
      id: b
   })
};

您必须使用this.$set（或Vue.set），因为您要将dynamic indexes 添加到数组中。

这是一个演示：

new Vue({
  el: "#app",
  data: {
    totalLength: '10',
    fetchList: [],
  },
  methods: {
    toggle: function(todo){
      todo.done = !todo.done
    },
    grabTeams(){
      for(let b = 0; b < this.totalLength; b++){
         this.$set(this.fetchList, b, {
            id: b
         })
      }
    }
  }
})

<div id="app">
  <button @click="grabTeams()">
   CLICK ME
  </button>
  {{ fetchList }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：