0

我相信这是一个相对独特的问题，因此我很难尝试解决它。

我正在 Vue 中创建类似文件管理器的解决方案，并且正在寻找某些文件夹/文件以显示唯一的缩略图（在我的示例中，如果找到“Creative Cloud”文件夹，则显示 Creative Cloud 徽标）。在我的应用程序中，我使用一个组件来表示每个文件。

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

我为这个问题的歧义道歉，但我很困惑。

4

1 回答 1

1

我可能遗漏了一些东西，但为什么不只是使用文件名作为参数的 v-bind 方法呢？

例如。

父模板

<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;
},
于 2018-05-02T03:57:34.763 回答