Array(n).fill(obj)问题

39 阅读1分钟

最近在做一个checkbox相关功能

image.png

 <section class="box-main-right_table__img-wrapper" v-for="(item, idx) in tableData" :key="idx">
            <label class="checkbox-label">
              <input type="checkbox" v-model="item.checked" />
              <img :src="'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" />
              <div class="mask">
                <div>{{ item.name }}</div>
                <div>{{ item.type }}</div>
              </div>
            </label>
          </section>

其中 tableData使用的是


...
data(){
  tableData:Array(10).fill({name:"name",type:"type",checked:false})
}

效果

image.png

选择了一个就全部选中了

一开始没想到是引用问题,我以为这个方法fill的对象没这个问题

后来发现是这个问题

正常方法


...
data(){
    tableData: [
       { name: 'Item 1', type: 'Type 1', checked: false },
       { name: 'Item 1', type: 'Type 1', checked: false },
       { name: 'Item 1', type: 'Type 1', checked: false },
       { name: 'Item 1', type: 'Type 1', checked: false },
       { name: 'Item 1', type: 'Type 1', checked: false },
       { name: 'Item 1', type: 'Type 1', checked: false },
     ],
}