-1

I have a vue app where Im using v-data table with show-select option. I want to clear only selected data using "cancel" button and Im looking for solution how to do it correctly. Already I can clear all data from table onclick.

Example on picture: I want to clear only 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 = [];
      
    },
xyz
  • 99
  • 2
  • 13

1 Answers1

1

Use any unique property (in this example - an id) to filter the row out of your items array.

cancel(){
    this.desserts = this.desserts.filter((e)=> {
      return e.id !== this.selected.id;
    });
  }
sdonchor
  • 82
  • 7
  • It doesnt work in this case, unfortunatelly. I havent got any result – xyz Nov 13 '20 at 07:19
  • It's an example, if your object's structure doesn't contain a property by the name 'id' use any other unique property, like 'name'. – sdonchor Nov 13 '20 at 07:25
  • in my struture its "text" but when I use this property all data are deleted - selected and unselected :) – xyz Nov 13 '20 at 08:29