Expand v-treeview based on filtered results

Question

In the tree view component, I would like to open all the nodes where there is some search text. But the expected is not happening.

Desired output: Open all the parents where there's some search text. Here's the codepen for the same.

https://codepen.io/anon/pen/MdxPKN?&editors=101

<div id="app">
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs6>
        <v-text-field label="search" v-model="search" box />

        <v-treeview :items="tree"
          :search="search"
          active-class="grey lighten-4 indigo--text"
          item-key="name"
          open-on-click
          :open-all="{searchLength}>0?true:false"
          hoverable />
      </v-flex>
    </v-layout>
  </v-container>
</div>

Answer 1

So it got a little tricky, you can't use the builtin search functionality, but there's an acceptably easy workaround.

You basically have to implement the filter yourself, and just send the items you need to v-treeview.

Then you can create another computed property from your filteredElements which just return the key and pass it to the :open property of treeview.

Made a codepen for you.

https://codepen.io/brafols/pen/XwGQov