vue svg里循环列表

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

<text x="-120" y="1050" font-size="45" @click="showWenduDialog(1, 1)">1号主电机</text>
<text x="280" y="1050" font-size="45" @click="showWenduDialog(1, 2)">2号主电机</text>
<text x="680" y="1050" font-size="45" @click="showWenduDialog(1, 3)">3号主电机</text>
<text x="1080" y="1050" font-size="45" @click="showWenduDialog(1, 4)">4号主电机</text>
<text x="1480" y="1050" font-size="45" @click="showWenduDialog(1, 5)">2号
<tspan x="1480" y="1100" >主电机</tspan >
</text>
<text x="1880" y="1050" font-size="45" @click="showWenduDialog(1, 6)">6号主电机</text>
<text x="2380" y="1050" font-size="45" @click="showWenduDialog(1, 7)">7号
<tspan x="2380" y="1100" >主电机</tspan >
</text>
<text x="2780" y="1050" font-size="45" @click="showWenduDialog(1, 8)">8号主电机</text>

实现代码如下：

 <g v-for="(item,index) in this.jgres" :key="index">
   <text  v-bind:x="getXvalue(index)"  y="1050" 
  font-size="45" @click="showWenduDialog(item.jid, index+1)" 
 v-html="getJgHtmlName(item.jgName,index)"></text>
</g>

getXvalue方法如下：

  getXvalue(index) {
      return -30+index*400;
  },

getJgHtmlName方法如下：

  getJgHtmlName(name,index) {
    if(name.length>=9){
      return  name.substr(0,7) + '<tspan x="' + this.getXvalue(index) + 
'" y="1100" >' + name.substr(7) + '</tspan >'
    }
    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) + '<tspan x="' + this.getXvalue(index) + 
'" y="1100" >' + name.substr(7) + '</tspan >'
        }
        else{
            return name
        }
      }
    }
  },