I am currently facing a unique challenge and finding it difficult to come up with a solution.
My project involves creating a file manager-like feature in Vue, where I want specific folders or files to display custom thumbnails. For example, showing the Creative Cloud logo if the 'Creative Cloud' folder is detected. Each file is represented by a component in my app.
The code for the file-grid Vue file may seem messy as I've been experimenting with different solutions:
<template>
<div id="localMain">
<div id="filesGrid">
<File :fileName="file"
:imageAddress="findImage($event)"
id="file"
v-for="file in files"
:key="file.id"></File>
</div>
</div>
</template>
<script>
import File from './LocalMain/File';
export default {
data() {
return {
creativeCloud: 'static/logos/creative-cloud.svg',
blankThumb: 'static/code.svg',
files: [
'Creative Cloud',
'Documents',
...
],
};
},
components: {
File,
},
methods: {
findImage: function findImage(e) {
/* Determine the appropriate thumbnail based on the file/folder name */
const name = e.target.dataset.fileName;
let image = this.blankThumb;
if (name === 'Creative Cloud') {
image = this.creativeCloud;
} else {
image = this.blankThumb;
}
return image;
},
},
};
</script>
<style scoped>
/* styling */
</style>
This is how the file component is structured:
<template>
<div id="file">
<img :src="imageAddress" alt="Logo" id="fileImg" />
<h3 v-if="display">{{ fileName }}</h3>
</div>
</template>
<script>
export default {
data() {
return {
display: false,
};
},
props: {
fileName: String,
imageAddress: String,
},
};
</script>
<style scoped>
/* styling */
</style>
Although my question might be unclear, I hope you can help me navigate through this confusion.