Vue.js - how to fill an array while using v-for

Question

I'm working in a routes project in Vue2. I won't explain the details to make this question as simple as possible.

I'm using a v-for to iterate through an array.

Each iterated object needs to be added to an array which I'm going to send to another component in my template.

It's a complex JSON. I'm on a leaflet map.

I need to join each point's coordinate with a polyline. The <l-polyline> component is expecting an array of coordinates (each coordinate is an array of 2 values).

So, my take is to put each object.coordinate into an array as I iterate over the first list. Then that array is going to be passed as a parameter to the polyline component in the template. How do I do that?

<div :key="i" v-for="(route, i) in jsonResult.routesList">
    <div :key="j" v-for="(stop, j) in route.stopsList">
        <l-marker :lat-lng="latLng(stop.lat, stop.long)" />
        // the problem is here because I'm only getting one object (stop) and I need the whole list of stops to get their coordinates
        <l-polyline :lat-lngs="latLng(stop.lat, stop.long)"></l-polyline>
    </div>
</div>

My JSON looks more or less like this:

The <l-polyline> object expects an array like this to draw the lines:

    [
      [20.567934, -103.366844],
      [19.54006, -99.1879349],
      [25.54193, -100.947906],
      [25.7970467, -100.59623]
    ] 

The routes list (jsonResult.routesList in the code)

"routesList": [
    {
      "stopsList": [
        {
          "id": 1,
          "seq": 1,
          "start": "2019-09-10T09:32:23",
          "end": "2019-09-10T10:17:23",
          "lat": 20.567934,
          "long": -103.366844,
        },
        {
          "id": 2,
          "seq": 2,
          "start": "2019-09-10T09:32:23",
          "end": "2019-09-10T10:17:23",
          "lat": 20.587934,
          "long": -104.386844,
        }
      ],

    },
    //another route
    {
      "stopsList": [
        {
          "id": 1,
          "seq": 1,
          "start": "2019-09-10T09:32:23",
          "end": "2019-09-10T10:17:23",
          "lat": 20.567934,
          "long": -103.366844,
        },
        {
          "id": 2,
          "seq": 2,
          "start": "2019-09-10T09:32:23",
          "end": "2019-09-10T10:17:23",
          "lat": 20.587934,
          "long": -104.386844,
        }
      ],
    },

Answer 1

I think the problem is in the way that your using your <div>, when you say:

<div :key="j" v-for="(stop, j) in route.stopsList">
        <l-marker :lat-lng="latLng(stop.lat, stop.long)" />
        // the problem is here because I'm only getting one object (stop) and I need the whole list of stops to get their coordinates
        <l-polyline :lat-lngs="latLng(stop.lat, stop.long)"></l-polyline>
</div>

In the v-for you were passing each individual element from the stopList to the <l-polyline> component. I think the correct approach would be to pass the whole stopList to the component, and then format it accordingly (iterating over the stopList array is done inside the <l-polylist> component.

<div :key="i" v-for="(route, i) in jsonResult.routesList">
      <div :key="j" v-for="(stop, j) in route.stopsList">
        <l-marker :lat-lng="latLng(stop.lat, stop.long)" />


      <l-polyline :lat-lngs="route.stopsList.map(x=>[x.lat,x.long])"></l-polyline>
</div>
</div>

Of course this is not an optimal approach, but it will solve your problem, a better way would be using something based on the idea of Dawid Zbiński and use a computed property. I hope this helps