O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required