如何将事件绑定到 Vuetify 中的树视图节点？

Question

我目前正在使用 Vuetify 制作树视图。我想要做的是，每当我点击一个节点时，我都想绑定一个事件。例如，当我单击某个节点时，会弹出一个对话框以显示该节点的详细信息。我想知道如何在点击时触发事件。

原文由 FledglingDeveloper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vuetify 的 Treeview 组件提供了一个范围槽 _标签_，您可以使用它来更改为每个节点显示的内容。例如，要打开一个对话框，您可以这样做：

   <v-treeview
    v-model="tree"
    :items="items"
    activatable
    item-key="name">
    <template slot="label" slot-scope="{ item }">
      <a @click="openDialog(item)">{{ item.name }}</a>
    </template>
  </v-treeview>

然后，您可以使用 对话框 组件并使用 openDialog 方法打开它/更改其内容

更新 2022-04-01 slot="label" slot-scope 已弃用。这是一个更新版本：

   <v-treeview
    v-model="tree"
    :items="items"
    activatable
    item-key="name">
    <template v-slot:label="{ item }">
      <a @click="openDialog(item)">{{ item.name }}</a>
    </template>
  </v-treeview>

原文由 Andrei Savin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<v-treeview
    v-model="tree"
    :items="items"
    :active="active"
    activatable
    open-on-click
    @update:active="test"
    >

 methods: {
    test() {console.log('TEST', this.active)},

原文由 Anthonio Achiduzu 发布，翻译遵循 CC BY-SA 4.0 许可协议