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)
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 = []; },
Advertisement
Answer
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