Is there a way to filter what our tree is displaying?

Question

I wonder if there is a way to filter what we can see in our V-treeview. In the filter field input we type the beginning of the key of an element of our tree and then the tree will only show us the elements whose keys start with what we typed in our filter field input.

I am on vue.js, using the latest version of vuetify I've searched on the vuetify page, but I haven't find yet https://vuetifyjs.com/en/components/treeview

Two problems remaining : I can filter my treeview for only one child level of depth. Children of my children cannot been filtered. (in the codepen example check the children of calendar) Moreover, when I match a child, the other nodes are not hidden.

Codepen updated

HTML

<div id="app">
  <v-app id="inspire">
    <v-treeview   :selectable="true"
      :items="items"></v-treeview>
  </v-app>
</div>

JS

 new Vue({


el: '#app',
  computed: {
    itemsComputed() {
      return this.items.filter(v => {
        let regexp = new RegExp(`^${this.search}`, "i")
        return v.name.match(regexp)
         || v.children.find(v => v.name.match(regexp))
      })
    }
  },



data: () => ({
    search: "",
    items: [
      {
        id: 1,
        name: 'Applications :',
        children: [
          { id: 2, name: 'Calendar : app',
            children: [
              {
                 id: 3, name: 'Chrome : app' 
              },
              { 
                id: 4, name: 'Webstorm : app'
              }
        ]},

    ]
  },
  {
    id: 5,
    name: 'Documents :',
    children: [
      {
        id: 6,
        name: 'vuetify :',
        children: [
          {
            id: 7,
            name: 'src :',
            children: [
              { id: 8, name: 'index : ts' },
              { id: 9, name: 'bootstrap : ts' }
            ]
          }
        ]
      },
      {
        id: 10,
        name: 'material2 :',
        children: [
          {
            id: 11,
            name: 'src :',
            children: [
              { id: 12, name: 'v-btn : ts' },
              { id: 13, name: 'v-card : ts' },
              { id: 14, name: 'v-window : ts' }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 15,
    name: 'Downloads :',
    children: [
      { id: 16, name: 'October : pdf' },
      { id: 17, name: 'November : pdf' },
      { id: 18, name: 'Tutorial : html' }
    ]
  },
  {
    id: 19,
    name: 'Videos :',
    children: [
      {
        id: 20,
        name: 'Tutorials :',
        children: [
          { id: 21, name: 'Basic layouts : mp4' },
          { id: 22, name: 'Advanced techniques : mp4' },
          { id: 23, name: 'All about app : dir' }
        ]
      },
      { id: 24, name: 'Intro : mov' },
      { id: 25, name: 'Conference introduction : avi' }
    ]
  }
]
  })
})

score 0 · Answer 1 · answered Dec 26 '18 at 14:54

I went with this function found in this post

filter: function(array, text) {
      return array.filter(function iter(o) {
          var temp;
          if (o.name.match(text)) {
              return true;
          }
          if (!Array.isArray(o.children)) {
              return false;
          }
          temp = o.children.filter(iter);
          if (temp.length) {
              o.children = temp;
              return true;
          }
      });

I was missing the children condition

Is there a way to filter what our tree is displaying?

1 Answers1