CODEWITHSUNDEEP
vue.jstreeviewvuetify.js
Loc Truong
Loc Truong

Reputation: 379

Vuetify treeview detect when click or select on selectable item

I have a selectable Vuetify treeview

<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"
>

enter image description here

I want to programmatically detect when user clicks on the arrow or the select box.

After checking their document, I couldn't find any approachable solution.

Please help if you are familiar with Vuetify and treeview.

Upvotes: 0

Views: 3280

Answers (1)

tony19
tony19

Reputation: 138436

When the toggle arrow is clicked, v-treeview emits an event named update:open. And when the checkbox is clicked, v-treeview emits an input event.

So you could just handle those events accordingly:

<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>

The only caveat to note is the update:open event fires upon initialization, so you might need to have a check for it.

demo

Upvotes: 2

Related Questions