Vue.js 如何创建一个Vue方法，为相应的扩展从列表中动态选择一个图标？

我试图根据文件类型显示一个合适的图标

我有一个

div

显示：

• 形象

• 或
  组件（其中

  {{{ext.value}}

  是要显示的图标名称）

div 我可以使用以下方法获取文件扩展名：

getExtension (value) {
  return path.extname(value)
}

props.item

是一个包含文件属性的对象，因此我将其作为输入传递到

path.extname（）

，它返回类似于：

'.ini'

，或

'.jpg'

---

• 我该怎么做？当

  v-else

  branch为true时，我不知道如何调用方法，我是否使用方法、计算属性

• 以及如何确保它使用通用文件图标

  值：“generic_icon”

  （

  扩展列表中的
  [0]
  ）来处理与列表中任何项目都不匹配的所有扩展名
  

---

我只想用一种方法返回相关图标：

methods: {
  getIcon(ext) {
    let icon = this.extensionsList.find((item) => {
      let { extension } = item;
      if (Array.isArray(extension)) {
        return extension.includes(ext);
      } else if (typeof extension === 'string') {
        return extension === ext;
      }
    }) || {};

    return icon.value || "generic_icon";
  }
}

然后在模板中这样调用：

<div>
  <img v-if="isImg(props.item.path)" :src="props.item.path">
  <v-icon v-else>
    {{ getIcon(getExtension(props.item.path)) }}
  </v-icon>
</div>

{{getIcon（getExtension（props.item.path））}

谢谢你的回答。但是，不确定如何使其工作，

getIcon（）

执行多次，因为此div位于显示多个对象的迭代器中。我不确定您的意思。您需要在您的帖子中包含该上下文。您的代码运行得非常好，非常感谢。只是div在一个组件中，该组件会多次更新，因此通过在模板中执行

{getIcon（getExtension（props.item.path））}

方法，也会多次触发该方法。我不能在这里发布所有的代码，但是你的方法有效并解决了问题，我会接受这是最好的答案，谢谢。我注意到

foo.js

和

foo.json

都接收到相同的图标，为json指定的图标：

{value:“code_icon”，扩展名：'.json'

。所以我猜它与字符串不完全匹配。有没有办法确保它匹配整个字符串，以便

foo.js

使用它自己的图标？啊，好吧，这是因为

'.json'.includes（'.js'）

是

真的

。最简单的方法是更改

扩展列表

结构，使

扩展

属性始终是一个数组（即

扩展：['.json']

）。这样，您就可以通过

item.extension.includes

在列表中找到该项。但是，我会更新我的答案以适应您当前的结构。

methods: {
  getIcon(ext) {
    let icon = this.extensionsList.find((item) => {
      let { extension } = item;
      if (Array.isArray(extension)) {
        return extension.includes(ext);
      } else if (typeof extension === 'string') {
        return extension === ext;
      }
    }) || {};

    return icon.value || "generic_icon";
  }
}

<div>
  <img v-if="isImg(props.item.path)" :src="props.item.path">
  <v-icon v-else>
    {{ getIcon(getExtension(props.item.path)) }}
  </v-icon>
</div>