vue двойная итерация в v-for - PullRequest
Новая
       6

vue двойная итерация в v-for

0 голосов
/ 25 марта 2020

Надеюсь, у вас все хорошо.

Я пытаюсь отобразить полилинии на моей карте vue2-leaflet. В настоящее время проблема заключается в том, что мне нужно отчасти повторить это дважды ... чтобы получить список вершин? Пожалуйста, проверьте код ниже и мои комментарии!

пример формата данных: [0: { linkid: "1220000102" fnode: "1220013900" квартира: "37.4760079" flng: "127.0587882" tnode: "1220000100" тлат: "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 : наблюдатель] length: 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]] part.

Мне нужно перебрать вершину, чтобы получить все данные вершины и отобразить правильную ломаную линию.

Любая идея ??

1 Ответ

1 голос
/ 25 марта 2020

Вы можете использовать вычисленное свойство для подготовки данных для листовки: 

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