在我的一个 VueJS 组件中,我有一个名为 的数组selectedJobs
,用于在 html 表中选中 html 复选框。replenJobsList
html 表中的数据来自一个名为;的对象数组。
/* My Component */
<template>
...
<table>
...
<tr v-for="replenJob in replenJobsList">
<td>
<input v-bind:id="'add-to-batch-' + replenJob.sku + replenJob.rplFrom + replenJob.replenTo"
v-bind:value="{
id: 0,
manualMoveBatchId: 0,
modifyDate: new Date().getTime(),
moveFrom: replenJob.rplFrom,
moveTo: replenJob.replenTo,
sku: replenJob.sku,
skuDescription: replenJob.description,
status: 'active',
units: replenJob.unitsToReplenish
}"
v-model="selectedJobs"
type="checkbox">
<label v-bind:for="'add-to-batch-' + replenJob.sku + replenJob.rplFrom + replenJob.replenTo"></label>
</td>
</tr>
...
</table>
...
</template>
...
data() {
return {
selectedJobs: [],
}
}
如果我console.log(selectedJobs.length);
选中所有复选框,它会给我正确的长度。但是当我取消选中一个复选框并再次检查数组的长度时,复选框长度不会减 1。
此外,如果我再次选中同一个复选框,它将向selectedJobs
数组中添加一个对象,而不是再次递减和递增。
如何让复选框正确添加和脱离selectedJobs
阵列?