[Solved] Q-Table selected rows is not updated

  • 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"
      <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>
      <div slot="top-left" slot-scope="props">
         <q-btn icon="delete" @click="deleteItem()" />
    deleteItem () {
        if (this.itemSelRows.length === 0) {
          this.$q.notify('please select one entry')
       // the second time, itemSelRows is not cleared

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


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

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


Log in to reply