最近在做一个checkbox相关功能
<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})
}
效果
选择了一个就全部选中了
一开始没想到是引用问题,我以为这个方法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 },
],
}