vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.64k stars 6.95k forks source link

[Bug Report][3.5.9] VTreeview: expose the "item" on item slot #19391

Open ricardo17coelho opened 6 months ago

ricardo17coelho commented 6 months ago

Environment

Vuetify Version: 3.5.9 Vue Version: 3.4.21 Browsers: Chrome 122.0.0.0 OS: Mac OS 10.15.7

Screenshot 2024-03-13 at 14 10 30

I want to use the v-treeview ( more or less ) like on the screenshot. When click on the arrow, the item should expand/collpase... and when click on the title should open an new route ( file manager / Google Drive behaviour )

Expected Behavior

Expose the item in order to be possible to override the layout of each v-treeview item

Actual Behavior

Is not possible ( as far i know )

yuwu9145 commented 1 month ago

Checkout [3.7.0-beta.1](https://www.npmjs.com/package/vuetify/v/3.7.0-beta.1)

Above use case can be achieved by using activatable & active-strategy="single-independent"

Activated item can be captured in @update:activated where whatever logic including redirecting can happen

<template>
  <v-treeview
    :items="items"
    color="red"
    item-title="title"
    item-value="id"
    activatable
    active-strategy="single-independent"
    @update:activated="activateCallback"
  />
</template>

<script setup>
  import { ref } from 'vue'

  function activateCallback ( e ) {
    console.log('activated item', e)
  }
  const items = ref([
    {
      id: 1,
      title: 'Applications :',
      children: [
        { id: 2, title: 'Calendar : app' },
        { id: 3, title: 'Chrome : app' },
        { id: 4, title: 'Webstorm : app' },
      ],
    },
    {
      id: 5,
      title: 'Documents :',
      children: [
        {
          id: 6,
          title: 'vuetify :',
          children: [
            {
              id: 7,
              title: 'src :',
              children: [
                { id: 8, title: 'index : ts' },
                { id: 9, title: 'bootstrap : ts' },
              ],
            },
          ],
        },
        {
          id: 10,
          title: 'material2 :',
          children: [
            {
              id: 11,
              title: 'src :',
              children: [
                { id: 12, title: 'v-btn : ts' },
                { id: 13, title: 'v-card : ts' },
                { id: 14, title: 'v-window : ts' },
              ],
            },
          ],
        },
      ],
    },
    {
      id: 15,
      title: 'Downloads :',
      children: [
        { id: 16, title: 'October : pdf' },
        { id: 17, title: 'November : pdf' },
        { id: 18, title: 'Tutorial : html' },
      ],
    },
    {
      id: 19,
      title: 'Videos :',
      children: [
        {
          id: 20,
          title: 'Tutorials :',
          children: [
            { id: 21, title: 'Basic layouts : mp4' },
            { id: 22, title: 'Advanced techniques : mp4' },
            { id: 23, title: 'All about app : dir' },
          ],
        },
        { id: 24, title: 'Intro : mov' },
        { id: 25, title: 'Conference introduction : avi' },
      ],
    },
  ])
</script>