Vuetify 树视图检测何时单击或 select select 可用项目

Question

我有一个select可用的 Vuetify 树视图

<v-treeview
    :load-children="fetchUsers"
    :items="user_tree_list"
    :open.sync="user_tree_open"
    :active="activeUserUidArray"
    class="user-tree-user"
    transition
    multiple-active
    selected-color="#060080"
    color="#07b53b"
    selectable
    hoverable
    dense
    open-on-click
    activatable
    item-children="children"
    item-key="uid"
    item-text="name"
    indeterminate-icon="mdi-chevron-right-box"
    @input="handleTreeSelection"
    v-on:update:active="user_tree_active_method"
>

我想以编程方式检测用户何时单击箭头或 select 框。

查看了他们的document，我找不到任何可行的解决方案。

如果您熟悉 Vuetify 和 treeview，请帮忙。

Answer 1

单击切换箭头时，v-treeview 会发出一个名为 update:open 的事件。当复选框被点击时，v-treeview 发出一个 input 事件。

因此您可以相应地处理这些事件：

<template>
  <v-treeview
    selectable
    :items="items"
    @update:open="onOpen"
    @input="onSelected"></v-treeview>
</template>

<script>
export default {
  methods: {
    onOpen(e) {
      // ignore initial open
      if (!this.__initial) {
        this.__initial = true
        return
      }

      console.log('toggle arrow clicked', e)
    },
    onSelected(e) {
      console.log('checkbox clicked', e)
    }
  }
}
</script>

唯一需要注意的是 update:open 事件在初始化时触发，因此您可能需要对其进行检查。

demo

Vuetify 树视图检测何时单击或 select select 可用项目

Vuetify treeview detect when click or select on selectable item

treeview

vue.js

vuetify.js