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

【问题标题】：Vue.js - Passing :key of row to a functionVue.js - 将行的键传递给函数
【发布时间】：2020-07-12 22:02:04
【问题描述】：

这是我第一次在 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)
        })
    }
},

谢谢！

【问题讨论】：

如果:key="teams.id" 那么item.id 会在函数中产生您的密钥，不是吗？
@Ohgodwhy，不敢相信我花了几个小时在这上面。我非常感谢您帮助我，因为我对 Vue.js 没有经验。你是绝对正确的。非常感谢您发表评论，以便我将您标记为未来用户的答案。
@Ohgodwhy 我建议将解决方案重新发布为答案，以便它可以被接受并更容易查看

标签： javascript vue.js axios

【解决方案1】：

鉴于此处的 key 引用了 item 自身的属性，您可以在给定插槽 props 的回调函数中访问该属性：

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

【讨论】：