~/ Recursive Vue Components

In this post, I'll walk through my process of creating a recursive Vue.js component, that is, a component which can render itself.

Demo
Completed Code

Wait, What? Why?!

I recently had a need for building a custom file-browser, which allowed users to click through any number of folders and files stored on their Dropbox account.

A directory listing is a classic example of recursion.

Imagine the following output of the tree command (a fancier, more gui-y ls):

.
├── dir1/
│   ├── fileA
│   ├── fileB
│   └── fileC
├── dir2/
├── dir3/
└── file1

If I can solve the problem of listing the highest-up directory:

.
├── dir1/
├── dir2/
├── dir3/
└── file1

then I will have solved the problem of listing any child directory as well:

.
├── fileA
├── fileB
└── fileC

To reuse a solution, I'll need to use the same bit of code, a Vue component.

Getting Set Up (acd19c5)

Here's all the code you'll need to get started writing your first Vue component:

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
  </head>
  <body>
    <div id='app'></div>
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Define a Tree Component (88346c5)

First, a simple hello world template to make sure everything's working:

<div id='app'>
  <tree></tree>
</div>
<script type='x-template' id='tree'>
  <div>
    Hello
  </div>
</script>

Notes

Vue.component('tree',{
  template: '#tree'
})

Notes

Mix in some data (4a6e34a)

Without a data method present, our Vue component method is pretty useless.

let files = [
  {tag: 'folder', name: 'dir1'},
  {tag: 'folder', name: 'dir2'},
  {tag: 'file', name: 'file1'}
]

Add the data to the tree component:

Vue.component('tree',{
  template: '#tree',
  data(){
    return {
      files
    }
  }
})

And try printing out that data from within the template:

<script type='x-template' id='tree'>
  <div>
    {{files}}
  </div>
</script>

It's not pretty.... yet, but even a few directives can meaningfully display the top-level directory specified in files.

<script type='x-template' id='tree'>
  <div>
    <div v-for="file in files">
      {{file.name}}<span v-if="file.tag == 'folder'">/</span>
    </div>
  </div>
</script>

Handling Click Events (022a9fc)

In order to expand a folder, we can add event listeners to a particular element using the v-on:click directive:

<div v-for="file in files">
  <div v-if="file.tag == 'folder'" v-on:click='toggleExpand()'>
    {{file.name}}
  </div>
  <div v-else>
    {{file.name}}
  </div>
</div>

Attempting to click on one of the folders will throw a ReferenceError about the function not being defined.

Define it in the component:

Vue.component('tree',{
  template: '#tree',
  methods: {
    toggleExpand: function(){
      console.log('togglin!')
    }
  },
  data(){
    //...
  }})

Rather than just log to the console, it'd be nice if a property on each of the folders were toggled, to visually represent whether or not a folder should be expanded to review its children.

Unfortunately, it's impossible to toggle properties on each individual file without a component for each folder.

Adding a <folder/> component (9b4bc33)

Modify the existing template

Instead of printing a div for folder entries:

<div v-for="file in files">
  <div v-if="file.tag == 'folder'" v-on:click='toggleExpand()'>
    {{file.name}}/
  </div>
  <div v-else>
    {{file.name}}
  </div>
</div>

We'll print a component instance:

<div v-for="file in files">
  <folder v-if="file.tag == 'folder'"></folder>
  <div v-else>
    {{file.name}}
  </div>
</div>

Create a template for the folder component

<script type="x-template" id='folder'>
  <div v-on:click="toggleExpand()">
    folder here
  </div>
</script>

Define a new component

Vue.component('folder',{
  template: '#folder',
  methods: {
    toggleExpand: function(){
      console.log('togglin!')
    }
  },
})

Note: I've removed the methods property from the tree component, and placed it in the new folder component.

Pass the folder name into the component as an attribute

<folder v-if="file.tag == 'folder'" :file='file'></folder>

In order to access the file object passed in as an attribute, we need to add a props attribute onto the component definition:

Vue.component('folder',{
  template: '#folder',
  props: ['file'],
  methods: {
    toggleExpand: function(){
      console.log('togglin!')
    }
  }
})

And print it out in the template:

<script type="x-template" id='folder'>
  <div v-on:click="toggleExpand()">
    {{file.name}}/
  </div>
</script>

Toggle the open state (8d5fcf9)

In order to toggle whether a folder displays its children or not, let's add the data method to the folder component, and initialize it to false:

Vue.component('folder',{
  template: '#folder',
  props: ['file'],
  methods: {
    toggleExpand: function(){
      console.log('togglin!')
    }
  },
  data: function(){
    return {
      isOpen: false
    }
  }
})

Modify toggleExpand() to flip that value:

toggleExpand: function(){
  this.isOpen = !this.isOpen
}

and display the value of isOpen inside the template:

<script type="x-template" id='folder'>
  <div v-on:click="toggleExpand()">
    {{file.name}}/
    <span v-if='isOpen'>show children</span>
  </div>
</script>

Displaying folder contents (4134c5a)

In order to display a folder's contents, let's first modify the files array to have files inside of folders:

let files = [
  {tag: 'folder', name: 'dir1', files: [
    {tag: 'file', name: 'fileA'},
    {tag: 'file', name: 'fileB'}
  ]},
  {tag: 'folder', name: 'dir2'},
  {tag: 'file', name: 'file1'}
]

Next, modify the template to display the child files (reusing the tree component) if the given file has a truthy files attribute and the isOpen value is true:

<script type="x-template" id='folder'>
  <div>
    <div v-on:click="toggleExpand()">
      {{file.name}}/
    </div>
    <tree v-if='isOpen && file.files'></tree>
  </div>
</script>

Lastly, we need to give the tree component a set of files to display, as it currently will continue displaying the top node of the files array. We can accomplish this with an attribute on the tree component:

<script type="x-template" id='folder'>
  <div>
    <div v-on:click="toggleExpand()">
      {{file.name}}/
    </div>
    <tree v-if='isOpen && file.files' :children='file.files'></tree>
  </div>
</script>

and add the props attribute onto the tree component definition:

Vue.component('tree',{
  template: '#tree',
  props: ['children']
  data(){
    return {
      files: this.children || files
    }
  }
})

Bells and whistles

The rest is a little CSS and a few more levels of files and folders.

Demo
Completed Code

~/ Posted by Jesse Shawl on 2017-02-01