替换Vue3中vue图标组件的路径道具中的数组值

Question

在当前的Vue3项目中，我通过@mdi/js使用材料设计图标(SVG(，并使用James Coyle的"vue图标"图标组件进行渲染。

脚本部分的相关部分：

import SvgIcon from '@jamescoyle/vue-icon'
import { mdiClockStart, mdiAlert } from '@mdi/js'

和模板：

<svg-icon type="mdi" :path="mdiClockStart"></svg-icon>

这将按预期完美渲染。

但是，如果我想在相关id值(总是一个数字(的循环中动态渲染图标，我就会遇到障碍。在模板中我有：

<div v-for="state in states" :key="state.id">
<svg-icon type="mdi" :path="stations[state.id].icon"></svg-icon>
</div>

在代码中，我定义了数据中的数组：

data: () => ({
stations: [
{ icon: 'mdiClockStart', color: 'color: green' },
{ icon: 'mdiAlert', color: 'color: red' }
]
})

这看起来很好，但浏览器控制台一直告诉我：

15:56:15.232 vue.runtime.esm.js:6829错误：属性d：预期数字，"mdiAlert"；

。。。就好像它试图将实际的SVG标记插入到路径中，而不是像上面的静态示例中那样只插入图标的名称。

如果我用双大括号输出该数组的内容，那么我将按预期从.icon节点获得字符串值。我认为它只是将值替换为：path道具，就像你可以使用：style道具一样。但运气不好。

EDIT：我还尝试使用函数inner:path传递状态id并返回mdi图标名称，但也失败了

有什么提示吗？感觉我很接近，但已经没什么想法了。

提前感谢！

Answer 1

您将sations定义为一个数组，因此它需要一个数字索引。因此，如果你的state.id不是一个数字，这是行不通的。

但如果我看一下你的代码，你似乎不需要stations对象：

<div v-for="state in states" :key="state.id">
<svg-icon type="mdi" :path="state.id"></svg-icon>
</div>

如果id是其他字符串，则可以将stations定义为对象，然后模板语法再次工作：

stations: {
id1: { icon: 'mdiClockStart', color: 'color: green' },
id2: { icon: 'mdiAlert', color: 'color: red' }
}