VueJS: получение информации о динамическом компоненте в методе, запущенном через v-bind - PullRequest
Новая
       49

VueJS: получение информации о динамическом компоненте в методе, запущенном через v-bind

0 голосов
/ 02 мая 2018

Я считаю, что это относительно уникальная проблема, и поэтому я испытываю трудности при ее решении.

Я создаю решение, подобное файловому менеджеру, в Vue и ищу определенные папки / файлы для отображения уникальной миниатюры (в моем примере, показывающей логотип Creative Cloud, если папка 'Creative Cloud' найдена ). В моем приложении я использую компонент для представления каждого файла.

Файл Vue файла-сетки читается как таковой (извините за беспорядок, я пытался интегрировать несколько различных решений, чтобы увидеть, что прилипает): 

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

Сам файловый компонент выглядит так: 

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

Я прошу прощения за двусмысленность в этом вопросе, но я в замешательстве.

1 Ответ

0 голосов
/ 02 мая 2018

Возможно, я что-то упустил, но почему бы просто не v-связать метод с именем файла в качестве аргумента?

например.

Родительский шаблон 

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

Родительский Javascript 

findImage: function findImage(name) {

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