[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"
          :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
    }
    


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

    Scott



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

    Scott