Флажки VueJS с объектами в качестве значений, связанных со свойством массива, не снимаются с массива, когда не отмечены - PullRequest
Новая
       38

Флажки VueJS с объектами в качестве значений, связанных со свойством массива, не снимаются с массива, когда не отмечены

0 голосов
/ 06 мая 2019

В одном из моих компонентов 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.

Более того, если я снова установлю этот же флажок, он добавит еще один объект к *Массив 1009 *, вместо того, чтобы снова уменьшать и увеличивать.

Как получить флажки для правильного добавления и удаления массива selectedJobs?

1 Ответ

2 голосов
/ 06 мая 2019

Не правильно будет отслеживать, если вы создадите объект в разметке, вам придется сделать это заранее.Вы можете использовать вычисляемое свойство. 

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>
...