关于怎么在vue中使用iconfont循环svg图标，

问题遇到的现象和发生背景

怎么在vue中使用iconfont循环svg图标

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《vue使用iconfont图表库svg图标，使用color修改颜色》, 一起来围观吧 https://blog.csdn.net/qq_29207823/article/details/122426003?utm_source=app&app_version=5.3.0

在vue里的svg标签里，想用v-for实现下面的列表

<text x="-120" y="1050" font-size="45" @click="showWenduDialog(1, 1)">1号主电机
<text x="280" y="1050" font-size="45" @click="showWenduDialog(1, 2)">2号主电机
<text x="680" y="1050" font-size="45" @click="showWenduDialog(1, 3)">3号主电机
<text x="1080" y="1050" font-size="45" @click="showWenduDialog(1, 4)">4号主电机
<text x="1480" y="1050" font-size="45" @click="showWenduDialog(1, 5)">2号
主电机

<text x="1880" y="1050" font-size="45" @click="showWenduDialog(1, 6)">6号主电机
<text x="2380" y="1050" font-size="45" @click="showWenduDialog(1, 7)">7号
主电机

<text x="2780" y="1050" font-size="45" @click="showWenduDialog(1, 8)">8号主电机
实现代码如下：

getXvalue方法如下：

getXvalue(index) {
return -30+index*400;
},
getJgHtmlName方法如下：

getJgHtmlName(name,index) {
if(name.length>=9){
return name.substr(0,7) + '' + name.substr(7) + ''
}
else{
return name
}
},
把两个方法，写在computed里，代码如下：

computed:{
getXvalue(){
return (index)=>{
return -30+index*400;
}
},
getJgHtmlName() {
return(name,index)=>{
if(name.length>=9){
return name.substr(0,7) + '' + name.substr(7) + ''
}
else{
return name
}
}
}
},