VueJS：通过v-bind在方法运行中获取动态组件信息

Question

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

我正在 Vue 中创建类似文件管理器的解决方案，我正在寻找某些 folders/files 来显示独特的缩略图（在我的示例中，如果 '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>

对于这个问题的含糊不清，我深表歉意，但我很困惑。

Answer 1

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

例如。

Parent模板

<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;
},

VueJS：通过v-bind在方法运行中获取动态组件信息

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

javascript

vue.js

vuejs2

vue-component

vue-directives