CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-directives
Lachlan
Lachlan

Reputation: 1282

VueJS: Obtaining dynamic component information in method run via v-bind

I believe this is a relatively unique problem, and as such I'm having difficulty trying to solve it.

I'm creating a file manager-like solution in Vue, and I'm looking for certain folders/files to display a unique thumbnail (in my example, showing the Creative Cloud logo if the 'Creative Cloud' folder is found). In my app I am using a component to represent each file.

The file-grid Vue file reads as such (sorry for the mess, I've been trying to integrate multiple different solutions to see what sticks):

<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) {
      /* Get the name of the file/folder, and choose a thumbnail accordingly */
      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>

The file component itself looks like this:

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

I apologise for the ambiguity in this question, but I'm quite confused.

Upvotes: 0

Views: 43

Answers (1)

CUGreen
CUGreen

Reputation: 3184

I might be missing something, but why not just v-bind the method with the file name as the argument?

eg.

Parent template

<File :fileName="file"
  :imageAddress="findImage(file)" 
  id="file" 
  v-for="file in files" 
  :key="file.id"></File>

Parent Javascript

findImage: function findImage(name) {

  var image = this.blankThumb;
  if (name === 'Creative Cloud') {
    image = this.creativeCloud;
  }
  return image;
},

Upvotes: 1

Related Questions