<template>
<v-treeview :items="items" :open="open" @update:open="updateOpen">
<template v-slot:prepend="{ item }">
<v-icon v-if="item.children">mdi-folder</v-icon>
<v-icon v-else>mdi-file</v-icon>
</template>
<template v-slot:label="{ item }">
{{ item.name }}
</template>
<template v-slot:append="{ item, open }">
<v-btn icon @click.stop="addItem(item)"> <!-- Step 1 -->
<v-icon>mdi-plus</v-icon> <!-- Step 2 -->
</v-btn>
</template>
</v-treeview>
</template>
<script>
export default {
data() {
return {
open: [],
items: [
{
id: 1,
name: 'Item 1',
children: [
{
id: 2,
name: 'Item 1.1',
},
],
},
// Add more items as needed
],
};
},
methods: {
addItem(parent) {
const newItem = {
id: Date.now(),
name: 'New Item', // Customize as needed
};
if (!parent.children) {
this.$set(parent, 'children', []); // Step 3
}
parent.children.push(newItem); // Step 4
this.$set(this.open, [parent.id], true); // Step 5
},
updateOpen(value) {
this.open = value;
},
},
};
</script>
<style scoped>
/ Add your custom styles as needed /
</style>