Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1

Caching the Current Folder Structure Using Vuex Chapter 6


return output;
}
}
});
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' + f.path_lower">{{ f.name
}}</a></strong></li>',
props: {
f: Object
}
});
Vue.component('file', {
template: '<li><strong>{{ f.name }}</strong><span v-if="f.size"> - {{
bytesToSize(f.size) }}</span> - <a v-if="link"
:href="link">Download</a></li>',
props: {
f: Object,
d: Object
},
data() {
return {
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
link: false
}
},
methods: {
bytesToSize(bytes) {
// Set a default
let output = '0 Byte';
// If the bytes are bigger than 0
if (bytes > 0) {
// Divide by 1024 and make an int
let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
// Round to 2 decimal places and select the appropriate unit from
the array
output = Math.round(bytes / Math.pow(1024, i), 2) + ' ' +
this.byteSizes[i];
}
return output
}
},
created() {
this.d.filesGetTemporaryLink({path: this.f.path_lower}).then(data => {
this.link = data.link;
});
},
});
Vue.component('dropbox-viewer', {
Free download pdf