Updating the structure with a URL change and setting Vue data outside of the instance

Now that we have our URL updating correctly, we can get the new structure whenever the hash changes. This can be done natively with JavaScript with the onhashchange function.

We are going to create a function that fires whenever the hash of the URL updates, which, in turn, will update a path variable on the parent Vue instance. This variable will be passed to the child dropbox-viewer component as a prop. This component will be watching for a change in the variable and, upon update, it will retrieve the new structure.

To begin with, update the parent Vue instance to have a data object with a path key - set to the empty string property. We are also going to ...

Get Vue.js 2.x by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.