Vue.js 2.x by Example

Linking folders and updating the structure

Now that we have our folders and files separated, we can transform our folder names into links. These links will then update the structure to show the contents of the selected folder. For this, we are going to use the path_lower property in each folder to build the link target. 

Create a dynamic link to each folder name, linking to the folder's path_lower. As we are getting more familiar with Vue, the v-bind property has been shortened to just the colon notation:

      Vue.component('folder', {        template: '<li><strong><a :href="f.path_lower">{{         f.name }}</a></strong></li>',        props: {          f: Object        },      });

We now need to add a click listener for this link. When clicked, we need to trigger the getFolderStructure ...