v-for中的vue双重迭代

Question

希望你一切都好。

我正在尝试在我的vue2单张地图上显示折线。目前的问题是，我必须对其进行两次迭代才能得到顶点列表？请检查下面的代码和我的评论！

示例数据格式：[0：{linkid：“ 1220000102”fnode：“ 1220013900”单位：“ 37.4760079”flng：“ 127.0587882”tnode：“ 1220000100”tlat：“ 37.4715107”tlng：“ 127.0510469”顶点列表：Array（4）0：（2）[“ 37.4760532”，“ 127.0587510”，ob：观察者]1：（2）[“ 37.4743382”，“ 127.0554621”，ob：观察者]2：（2）[“ 37.4739651”，“ 127.0547651”，ob：观察者]3：（2）[“ 37.4715528”，“ 127.0510043”，ob：观察者]长度：4}]

我已经在let linkList中添加了它们，并在此处添加了它：

 <l-feature-group>
  <l-polyline
    v-for="link in this.linkList"
    :key="link.linkid"
    :lat-lngs="polyline.link"
    :color="'green'"
  >
  </l-polyline>
</l-feature-group>

事实是，：lat-lngs =“”格式为[[fromLat，fromLng]，[vertexLat，vertexLnt]，...，[vertexLat，vertexLnt]，[toLat，toLng]]部分。

我需要迭代顶点以获取所有顶点数据并显示正确的折线。

任何想法？

Answer 1

您可以使用计算属性为传单准备数据：

computed : {
  links () {
    return this.linkList.map(l => {
       l.latlng = [[l.flat,l.flng], ...l.vertexlist , [l.tlat,l.tlng]]
       return l
    }) 
  }
}

<l-feature-group>
  <l-polyline
    v-for="link in this.links"
    :key="link.linkid"
    :lat-lngs="link.latlngs"
    :color="'green'"
  >
  </l-polyline>
</l-feature-group>

或在模板中：

<l-polyline
    v-for="l in this.linkList"
    :key="l.linkid"
    :lat-lngs="[[l.flat,l.flng], ...l.vertexlist , [l.tlat,l.tlng]]"
    :color="'green'"
  >