1.通过change点击事件监听id
<a-list-item slot="renderItem" slot-scope="item">
<!-- 复选框 -->
<a-checkbox :checked="item.done" @change="(e) => {cbStatusChanged(e, item.id)}">{{item.info}}</a-checkbox>
</a-list-item>
2.构造对象并传给store
// 复选框
cbStatusChanged (e, id) {
// console.log(e.target.checked)
// console.log(id)
const param = {
id: id,
status: e.target.checked
}
this.$store.commit('changeStatus', param)
},
3.在moutaitions中修改list数组的done状态
moutaitions:{
// 复选框选择
changeStatus (state, param) {
const i = state.list.findIndex(x => x.id === param.id)
if (i !== -1) {
state.list[i].done = param.status
}
}
}