Как очистить выбранную строку в v-data-table, Vuetify

Question

У меня есть приложение Vue , где я использую v-data-tableс show-selectопцией. Я хочу удалить только выбранные данные с помощью кнопки «отменить». Уже могу очистить все данные из таблицы onclick.

Пример на картинке: я хочу очистить только выбранную строку (сэндвич с мороженым)

Вот мой код:

Стол:

<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>

кнопка "отменить"

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

сценарий

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

Answer 1

Если вы просто хотите отменить их выбор:

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

Если вы хотите их удалить:

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

_{Имейте в виду, что этот алгоритм вычитания массива имеет сложность O (n ^ 2), поэтому для больших наборов данных это может быть медленным. В этом случае вы можете использовать более надежный алгоритм.}