javascript - vuetify treeview 每个对象都打开了，但我没有设置“open-all”选项

Question

我正在为我的项目设置 vuetify 的树视图组件。我单击了树视图的文件夹对象，每个对象都打开了。但我没有设置“全部开放”选项。

我的项目基于 vue cli 3，我的 ESLint 配置是“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

标签： javascriptvue.jstreeviewvuetify.js

Answer 1

你item-key的 is 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>