我正在为我的项目设置Vuetify的TreeView组件。我单击了TreeView的文件夹对象,每个对象都打开了。但是我没有设置"打开"选项。
我的项目基于VUE CLI 3,而我的Eslint Configs是" Airbnb"。
模板:
<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>
脚本:
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',
png: 'mdi-file-image',
txt: 'mdi-file-document-outline',
jpg: 'mdi-file-image',
jpeg: 'mdi-file-image',
gif: 'mdi-file-image',
arsc: 'mdi-file-document',
RSA: 'mdi-key-variant',
SF: 'mdi-file-document',
MF: 'mdi-file-document',
xml: 'mdi-file-xml',
dex: 'mdi-android',
java: 'mdi-code-braces',
kt: 'mdi-android',
css: 'mdi-language-css3',
android: 'mdi-android',
properties: 'mdi-file-document',
version: 'mdi-file-document',
so: 'mdi-file-document',
provider: 'mdi-file-document',
providers: 'mdi-file-document',
},
filename: '',
filepath: '',
filetype: '',
},
}),
computed: {
selected() {
if( !this.active.length ) return undefined;
const selected = this.active[0];
console.log(selected);
},
},
methods: {
.
.
.
JSON数据样本:
[
{
"name":"sources",
"type":"directory",
"children":[
{
"name":"android",
"type":"directory",
"children":[
{
"name":"support",
"type":"directory",
"children":[
{
"name":"fragment",
"type":"directory",
"children":[
{
"name":"R.java",
"id":662,
"type":"java",
"path":"sources/android/support/fragment/R.java"
},
{
"name":"BuildConfig.java",
"id":663,
"type":"java",
"path":"sources/android/support/fragment/BuildConfig.java"
}
]
},
{
"name":"mediacompat",
"type":"directory",
"children":[
{
"name":"R.java",
"id":664,
"type":"java",
"path":"sources/android/support/mediacompat/R.java"
},
{
"name":"BuildConfig.java",
"id":665,
"type":"java",
"path":"sources/android/support/mediacompat/BuildConfig.java"
}
]
}
]
}
]
},
{
"name":"ntouch",
"type":"directory",
"children":[
{
"name":"ntouch_apk_01",
"type":"directory",
"children":[
{
"name":"R.java",
"id":666,
"type":"java",
"path":"sources/ntouch/ntouch_apk_01/R.java"
},
{
"name":"BuildConfig.java",
"id":667,
"type":"java",
"path":"sources/ntouch/ntouch_apk_01/BuildConfig.java"
},
{
"name":"Ntouch_apk_01.java",
"id":668,
"type":"java",
"path":"sources/ntouch/ntouch_apk_01/Ntouch_apk_01.java"
},
{
"name":"SendDateToServer.java",
"id":669,
"type":"java",
"path":"sources/ntouch/ntouch_apk_01/SendDateToServer.java"
}
]
}
]
}
]
},
{
"name":"resources",
"type":"directory",
"children":[
{
"name":"META-INF",
"type":"directory",
"children":[
{
"name":"MANIFEST.MF",
"id":670,
"type":"MF",
"path":"resources/META-INF/MANIFEST.MF"
},
{
"name":"CERT.RSA",
"id":671,
"type":"RSA",
"path":"resources/META-INF/CERT.RSA"
},
{
"name":"CERT.SF",
"id":672,
"type":"SF",
"path":"resources/META-INF/CERT.SF"
}
]
},
{
"name":"classes.dex",
"id":673,
"type":"dex",
"path":"resources/classes.dex"
},
{
"name":"AndroidManifest.xml",
"id":674,
"type":"xml",
"path":"resources/AndroidManifest.xml"
},
]
}
]
当我单击"资源"文件夹对象时,请期望输出以下内容:https://imgur.com/oju4hjx
但是实际输出:一切都立即打开https://imgur.com/7ytq3mx
您的item-key
是id
,在某些节点中为undefined
。您应该拥有每个节点的ID,包括父节点,例如:
[
{
"name":"sources",
"id": 1,
"type":"directory",
"children":[
{
"name":"android",
"id": 2
"type":"directory",
"children":[]
}
....
}
]
或将item-key
更改为name
。我期望名称在您的结构中是独一无二的(这可能是不可能的(
<v-treeview
:active.sync="active"
:open.sync="open"
:items="items"
item-key="name"
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>