javascript - 未选中时，将对象作为绑定(bind)到数组属性的值的 VueJS 复选框不会脱离数组

Question

在我的一个 VueJS 组件中，我有一个名为 selectedJobs 的数组，它用于 html 表中选中的 html 复选框。 html 表中的数据来自名为 replenJobsList 的对象数组；

/* 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 数组中以及从 selectedJobs 数组中删除？

Answer 1

如果您在标记中创建对象，它将无法正确跟踪，您必须事先执行此操作。您可以使用计算属性。

new Vue({
  el: "#app",
  data: {
    replenJobsList: [
      { rplFrom: 'example@example.com', replenTo: 'foo@bar.com', sku: 1, description: '11111', unitsToReplenish: 33 },
      { rplFrom: 'example@example.com', replenTo: 'foo@bar.com', sku: 2, description: '22222', unitsToReplenish: 22 },
      { rplFrom: 'example@example.com', replenTo: 'foo@bar.com', sku: 3, description: '33333', unitsToReplenish: 11 },
    ],
    selectedJobs: [],
  },
  computed: {
    compJobsList() {
      return this.replenJobsList.map((job, index) => ({
          id: index,
          manualMoveBatchId: 0,
          modifyDate: new Date().getTime(),
          moveFrom: job.replFrom,
          moveTo: job.replenTo,
          sku: job.sku,
          skuDescription: job.description,
          status: 'active',
          units: job.unitsToReplenish,
        }));
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr><th>Jobs</th></tr>
    </thead>
    <tbody>
      <tr v-for="job in compJobsList" :key="job.id">
        <td>
          <input type="checkbox"
            :value="job" 
            v-model="selectedJobs">
            <label for="">{{ job.skuDescription }}</label>
        </td>
      </tr>
    </tbody>
  </table>
  <span>Checked jobs: {{ selectedJobs }}</span>
</div>