Remove a row on uncheck in iview

Question

I have an iview form which contains several items, each item has a checkbox in its first column. The code snippet of the checkbox is:

<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;
          }
        }
      }
    }

At first, all items are checked. Then if I uncheck an item except the last one, the item is disappeared, but the next item is unchecked! Is there a way to avoid this side effect?

Answer 1

I've modified my code to force refreshing the whole form, it works. But I think its not elegant enough. Is there a better way? ...

<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)
  }
}

...