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

【问题标题】：How to bind an event to a treeview node in Vuetify?如何将事件绑定到 Vuetify 中的树视图节点？
【发布时间】：2019-07-10 04:40:18
【问题描述】：

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

【问题讨论】：

问题在于@update:active事件只传递了被点击节点的KEY，没有传递相对对象
请参阅文档中的 return-object 属性以更改此行为

标签： vue.js vuetify.js

【解决方案1】：

Vuetify 的 Treeview 组件提供了一个作用域插槽 label，您可以使用它来更改为每个节点显示的内容。例如，要打开一个对话框，您可以执行以下操作：

  <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 方法打开它/更改其内容

【讨论】：

此方法的唯一问题是您必须准确点击标签才能触发点击事件。我使用了标签槽，但后来发现 @update:active 方法很完美。
你可以简单地做到这一点pastebin.com/CTYmYbvJ你只需要自己做点击逻辑和选择状态，但这应该很容易:)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你有两个事件：

第一个是update:open，当您单击具有子节点且其处理程序将打开的节点作为参数的节点时触发：

@update:open="openNode"

在方法中：

methods:{
  openNode(node){
      //
   }

}

第二个是update:active，当您单击没有子节点的叶子并且其处理程序将单击的节点作为参数时触发：

@update:active="clickOnNode"

在方法中：

methods:{
  clickOnNode(node){
      //
   }

}

要获取带有字段的节点，您应该添加 prop return-object ：

 <treeview return-object @update:active="clickOnNode" ...

【讨论】：

【解决方案4】：

@anthonio-achiduzu，至少对于Vuetify 2.3.3版本，@update:active在this.active被改变之前被触发，所以test()会在上面的代码中输出一个空数组。

【讨论】：

【解决方案5】：

有了 Vuetify 2.3.5，我用这个没问题

<v-treeview return-object item-key="id" hoverable activatable selected-color="red"
          @update:active="updateForm" color="warning" :items="categories">
</v-treeview>
      <template slot-scope="{ item }">
                <a @click="updateForm(item)">{{ item.name }}</a>
      </template>

在方法中，我编写函数 updateForm（但这是测试值的控制台）：

updateForm(item)
        {
            if(item.length>0)
                console.log(item[0].name)
        }

【讨论】：