vue 在 v-for 中进行双重迭代

Question

希望你一切都好。

我正在尝试在我的 vue2-leaflet 地图上显示折线。目前的问题是我必须将它迭代两次......才能获得顶点列表？请检查下面的代码和我的评论！

示例数据格式：
[0: {
linkid：“1220000102”
fnode：“1220013900”
单位：“37.4760079”
flng：“127.0587882”
tnode：“1220000100”
tlat：“37.4715107”
tlng：“127.0510469”
顶点列表：数组（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'"
  >

vue 在 v-for 中进行双重迭代

vue double iterate in v-for

geojson

leaflet

vue.js