CODEWITHSUNDEEP
javascriptvue.jsdatatablevue-componentvuetify.js
xyz
xyz

Reputation: 119

How to clear selected row in v-data-table, Vuetify

I have a Vue app where I'm using v-data-table with show-select option. I want to clear only selected data using the "cancel" button. Already I can clear all data from the table onclick.

Example in picture: I want to clear only the selected row (Ice cream sandwich)

enter image description here

Here is my code:

Table:

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  :single-select="singleSelect"
  item-key="name"
  show-select
  class="elevation-1"
>
  <template v-slot:top>
    <v-switch
      v-model="singleSelect"
      label="Single select"
      class="pa-3"
    ></v-switch>
  </template>
</v-data-table>

"cancel" button

<v-btn class="ma-2" color="primary" @click="cancel"> Cancel </v-btn>

script

cancel() {
   this.desserts = [];
},

Upvotes: 1

Views: 4506

Answers (1)

Dan
Dan

Reputation: 63139

If you just want to deselect them:

cancel() {
   this.selected = [];
}

If you want to remove them:

cancel() {
  this.desserts = this.desserts.filter(item => {
    return this.selected.indexOf(item) < 0;
  });
}

Keep in mind that this array subtraction algorithm is O(n^2) complexity, so for large datasets this may be slow. In that case, you can use a more robust algorithm

Upvotes: 4

Related Questions