Currently, I am configuring Vuetify's treeview component for my project. When I clicked on the folder objects within the treeview, every object opened up without me setting the 'open-all' option.
My project is based on vue cli 3 and my ESLint configs follow the 'airbnb' style guide.
TEMPLATE :
<v-card class="mx-auto">
<v-sheet class="pa-1 tree__resources lighten-2>
<v-treeview
:active.sync="active"
:open.sync="open"
:items="items"
item-key="id"
activatable
active-class="primary--text"
open-on-click
return-object>
<template v-slot:prepend="{ item, open }">
<v-icon v-if="item.type == 'directory'">
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
<v-icon v-else>
{{ files[item.type] }}
</v-icon>
</template>
</v-treeview>
</v-sheet>
</v-card>
Scripts:
export default {
data: () => ({
active: [],
open: [],
items: ["JSON DATA"],
files: {
html: 'mdi-language-html5',
js: 'mdi-nodejs',
json: 'mdi-json',
md: 'mdi-markdown',
pdf: 'mdi-file-pdf',
// more file types...
},
filename: '',
filepath: '',
filetype: '',
},
}),
computed: {
selected() {
if (!this.active.length) return undefined;
const selected = this.active[0];
console.log(selected);
},
},
methods: {
.
.
.
JSON DATA SAMPLE:
[
{
"name":"sources",
"type":"directory",
// more directory/file structures...
}
]
When I clicked on the "resources" folder object, I expected the output to look like this:
However, the actual output was different as everything opened immediately: