Navigating through the File Tree and Loading Folders from the URL Chapter 5We now need to add a click listener for this link. When clicked, we need to trigger
the getFolderStructure method on the dropbox-viewer component. Although the
click method will use the f variable on each instance to get the data, it's good practice to
have the href attribute set to the folder URL.
Using what we learned in the early chapters of the book, create a method on the folder
component that, when triggered, emits the folder path to the parent component. The
dropbox-viewer component also needs a new method to update the structure with the
given parameter when fired.
Create the new method on the folder component and add the click event to the folder
link. As with the v-bind directive, we are now using the shorthand notation for v-on,
represented by an @ symbol:
Vue.component('folder', {
template: '<li><strong><a
@click.prevent="navigate()" :href="f.path_lower">{{
f.name }}</a></strong></li>',
props: {
f: Object
},
methods: {
navigate() {
this.$emit('path', this.f.path_lower);
}
}
});Along with defining the click event, an event modifier has also been added. Using
.prevent after the click event adds preventDefault to the link action, this stops the link
from actually going to the specified URL and instead lets the click method handle
everything. More event modifiers and details about them can be found in the Vue
documentation.
When clicked, the navigate method is fired, which emits the folder's lower path using the
path variable.
Now that we have our click handler and the variable being emitted, we need to update
the view to trigger a method on the parent dropbox-viewer component:
<template v-for="entry in structure.folders">
<folder :f="entry" @path="updateStructure">
</folder>
</template>