[Solved] Q-Table selected rows is not updated

[Stanley]

In the data table, there is a delete button. Suppose there are two items, I set the checkbox of first item as selected, then it will be deleted. Now the second item is not checked, but I can still delete it. It seems variable itemSelRows is not cleared after first deletion.

<q-table :data="items"
      :columns="itemColumns"
      selection="single"
      :selected.sync="itemSelRows"
      row-key="itemNo"
>
  <q-tr slot="body" slot-scope="props" :props="props">
     <q-td auto-width><q-checkbox color="primary" v-model="props.selected"/></q-td>
     <q-td key="itemNo" :props="props">{{ props.row.itemNo }}</q-td>
  </q-tr>
  <div slot="top-left" slot-scope="props">
     <q-btn icon="delete" @click="deleteItem()" />
  </div>
</q-table>

deleteItem () {
    if (this.itemSelRows.length === 0) {
      this.$q.notify('please select one entry')
      return
    }
   // the second time, itemSelRows is not cleared
}

[s.molinari]

Um, it’s up to you to do the clearing/ deleting etc. in your component. The code above doesn’t do anything really.

Scott

[Stanley]

@s-molinari Hi Scott, I thought it is two-ways binding. It seems we have to maintain it manually. Thanks!

[s.molinari]

@Stanley - there is no two-way binding for a button that is being used to trigger a method to delete the values in the array of rows.

Scott