Vuetify v-treeview 获取最后点击的节点

Question

检索刚刚在<v-treeview> 中单击的节点（ID）的最简单方法是什么？有一个update:open 事件会发出一个包含所有打开节点的数组。我可以临时存储整个数组并将新版本与旧版本进行比较，以查看添加或删除了哪个元素。但这似乎有点麻烦，对吧？我想用节点的id从后端动态地重新加载节点的children的children，让用户有数据已经​​在前端的感觉。也许可以在update:open 事件中发出不是整个数组，而只是当前节点，就像这样：@update:open="onExpand(item)"? （这会引发错误Property or method "item" is not defined。）

Answer 1

您可以使用VTreeView 的label slot，它在其插槽道具中传递item 本身。在该插槽中，您可以使用还包含该项目的 click 处理程序呈现 span：

<template>
  <v-treeview :items="items">
    <template #label="{ item }">
      <span @click="onItemClick(item)">{{item.name}}</span>
    </template>
  </v-treeview>
</template>

<script>
export default {
  methods: {
    onItemClick(item) {
      console.log(item.id)
    }
  }
}
</script>