Vue. js - Передача: ключ строки в функцию

Question

Это мой первый случай с таблицами данных в vue. js, поэтому я вытащил teams.id из API и установил его в качестве уникального ключа для каждой строки в таблице данных. Моя проблема в том, что у меня проблемы с передачей ключа в функцию «удалить». Я могу получить индекс, но не могу найти способ получить ключ указанной строки.

<v-data-table
:headers="headers"
:items="teams"
:key="teams.id"
sort-by="id"
class="elevation-1"
>

<template v-slot:item.actions="{ item }">
<v-icon
        small
        @click="deleteItem(item)"
>
    fas fa-trash
</v-icon>
</template>
</v-data-table>

deleteItem(item) {
    const index = this.teams.indexOf(item)
    if(confirm('Are you sure you want to delete this item?')) {
        axios.delete(this.apiUrl+index).then(resp => {
            this.teams.splice(index, 1)
        })
    }
},

Спасибо!

Answer 1

Учитывая, что key здесь ссылается на свойство самого себя item, вы можете получить доступ к этому свойству из функции обратного вызова, если слот поддерживает:

deleteItem(item) {
  console.log(item.id) // property exists here
}