How to get parent file directory order of selected element in vuetify tree view


This is My Code

<template>
      <div>
        what is the configLabel ? : {{configLabel}}
        <v-treeview
          v-model="tree"
          :open="initiallyOpen"
          :items="treeItems"
          activatable
          item-key="name"
          open-on-click
          open-all
          @update:active="selectedTreeRow"
        >
          <template v-slot:prepend="{ item, open }">
            <v-icon v-if="!item.file">
              {{ open ? "mdi-folder-open" : "mdi-folder" }}
            </v-icon>
            <v-icon v-else>
              {{ files[item.file] }}
            </v-icon>
          </template>
        </v-treeview>
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        initiallyOpen: ["public"],
        files: {
          txt: "mdi-file-document-outline",
        },
        tree: [],
            configLabel: "",
        treeItems: [
          {
            name: "json",
            children: [
              { name: "test1" },
              { name: "test2", children: [{ name: "test4" }, { name: "test5" }] },
              { name: "test3", children: [{ name: "test6" }, { name: "test7" }] },
            ],
          },
        ],
      }),
      methods: {
        selectedTreeRow(item) {
          if (item.length > 0) {
            this.selectedTreeItem = item[0];
            if (this.selectedTreeItem.name === "json") {
              this.configLabel = "json";
            } else {
              let itemIndex = this.itemIndexer(
                this.selectedTreeItem,
                this.treeItems[0].children,
                (this.itemSelectedIndexer = "json")
              );
              this.configLabel = itemIndex;
            }
          }
        },
        itemIndexer(selectedTreeItem, items = null, itemSelectedIndexer) {
          if (!items) {
            items = this.treeItems;
          }
          console.log("itemSelectedIndexer", itemSelectedIndexer);
          return items.reduce((acc, item) => {
            if (acc) {
              return acc;
            }
            console.log("item", item);
    
            if (item.name === selectedTreeItem.name) {
              itemSelectedIndexer += "." + item.name;
              console.log("valueEsitlendi", itemSelectedIndexer);
              return itemSelectedIndexer;
            }
            if (item.children) {
              return this.itemIndexer(
                selectedTreeItem,
                item.children,
                itemSelectedIndexer
              );
            }
    
            return acc;
          }, null);
        },
      },
    };

</script>

What I want to do is to write by adding dots between the selected item starting from the top directory to the directory it is in.

for example by looking at the item selected in the screenshot
enter image description here

config label value should be like this => json.test2.test5

how do i get the config label in this format?

Source: Vue – Stack Overflow

October 21, 2021
Category : News
Tags: treeview | Vue.js | vuejs2 | vuetify.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.