Vue.js - 将行的键传递给函数

Question

这是我第一次在 vue.js 中处理数据表，所以我从 api 中提取了 teams.id，并将其设置为数据表中每一行的唯一键。我的问题是我无法将密钥传递给“删除”功能。我能够获取索引，但我无法找到获取所述行的键的方法。

<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) {&nbsp; console.log(item.id) // property exists here}