未选中时，具有对象作为绑定到数组属性的值的 VueJS 复选框不会脱离数组

Posted 2023-02-22

【中文标题】未选中时，具有对象作为绑定到数组属性的值的 VueJS 复选框不会脱离数组

【英文标题】：VueJS checkboxes with objects as values bound to an array property do not come off of array when unchecked

【发布时间】：2019-09-24 06:19:43

【问题描述】：

在我的一个 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 数组？

【问题讨论】：

我不确定您是否可以将 javascript 对象设置为 input.value。

【参考方案1】：

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

new Vue(
  el: "#app",
  data: 
    replenJobsList: [
       rplFrom: '[e-mail]', replenTo: '[e-mail]', sku: 1, description: '11111', unitsToReplenish: 33 ,
       rplFrom: '[e-mail]', replenTo: '[e-mail]', sku: 2, description: '22222', unitsToReplenish: 22 ,
       rplFrom: '[e-mail]', replenTo: '[e-mail]', 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>

【讨论】：

感谢您的回复。在我在问题中提供的示例中，我无法理解如何在我的表格中实现这一点。您能否调整您对我的模板设置方式的回答？如果您需要更多信息，请告诉我。

@aCarella 我将其更新为表结构。有什么具体的你不明白吗？

我认为 <div>s 让我很失望，我无法理解如何在表格中实现。

@StevenB。我如何预先检查一个复选框（以防我想从数据库中填充 checkobxes）。例如以下不起作用。 selectedJobs: [ rplFrom: '[e-mail]', replenTo: '[e-mail]', sku: 1, description: '11111', unitsToReplenish: 33 ]

@geeksalah 您需要使用相同的对象实例。在创建的钩子中，您可以执行 this.selectedJobs.push(this.compJobsList[0]); 并且它会起作用。见this fiddle。