Удалить строку при снятии флажка в iview

Question

У меня есть форма iview, которая содержит несколько элементов, каждый из которых имеет флажок в первом столбце. Фрагмент кода флажка:

<input type='checkbox' v-model='item.isChecked' @change='switchBillSelected(item)'></input>
    
    switchBillSelected(item) {
      if (!item.isChecked) {
        for (let i=0; i<bills.length; i++) {
          if (bills[i].id == item.id) {
            bills.splice(i, 1)
            break;
          }
        }
      }
    }

Сначала проверяются все элементы. Затем, если я сниму флажок с элемента, кроме последнего, элемент исчезнет, ​​но следующий элемент не будет отмечен! Есть ли способ избежать этого побочного эффекта?

Answer 1

Я изменил свой код, чтобы принудительно обновить всю форму, он работает. Но я думаю, что это недостаточно элегантно. Есть ли способ лучше? ...

<input type='checkbox' v-model='item.isChecked' @change='switchBillSelected(item)'></input>

switchBillSelected(item) {
  if (!item.isChecked) {
    for (let i=0; i<bills.length; i++) {
      if (bills[i].id == item.id) {
        bills.splice(i, 1)
        break;
      }
    }

    // Keep an alias of this.bills
    let alias = this.bills;

    // Clear & re-assign this.bills to refresh the check status of visible rows
    this.bills = [];
    setTimeout((bills) => {
      this.bills= bills;
    }, 500, alias)
  }
}

...