vue double iterate in v-for

Question

Hope you're all well.

I'm trying to display polylines on my vue2-leaflet map. Current problem at the moment is that I have to kind of iterate it double... to get the vertexlist? Please check below code and my comments!

example data format:
[0: {
linkid: "1220000102"
fnode: "1220013900"
flat: "37.4760079"
flng: "127.0587882"
tnode: "1220000100"
tlat: "37.4715107"
tlng: "127.0510469"
vertexlist: Array(4)
0: (2) ["37.4760532", "127.0587510", ob: Observer]
1: (2) ["37.4743382", "127.0554621", ob: Observer]
2: (2) ["37.4739651", "127.0547651", ob: Observer]
3: (2) ["37.4715528", "127.0510043", ob: Observer]
length: 4}]

I've got them in let linkList, and added it here:

 <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>

The thing is that, that :lat-lngs="" format is [[fromLat, fromLng], [vertexLat, vertexLnt], ... ,[vertexLat, vertexLnt], [toLat, toLng]] part.

I need to iterate vertex to get the all vertex data and display the correct polyline.

Any idea??

Answer 1

You could use a computed property to prepare the data for leaflet:

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>

Or in the template:

<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'"
  >