vue.js - 如何将事件绑定(bind)到 Vuetify 中的 TreeView 节点？

Question

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

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>

然后您可以使用 dialog组件并使用 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>