Open ricardo17coelho opened 6 months 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>
Environment
Vuetify Version: 3.5.9 Vue Version: 3.4.21 Browsers: Chrome 122.0.0.0 OS: Mac OS 10.15.7
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 )