Vue.js - 如何在使用 v-for 时填充数组

Question

我在 Vue2 中的一个路由项目中工作。为了让这个问题尽可能简单，我不会解释细节。

我正在使用 v-for 遍历数组。

每个迭代对象都需要添加到一个数组中，我将把它发送到模板中的另一个组件。

这很复杂 JSON。我在传单地图上。

我需要用折线连接每个点的坐标。 <l-polyline> 组件需要一个坐标数组（每个坐标是一个包含 2 个值的数组）。

因此，我的做法是在遍历第一个列表时将每个 object.coordinate 放入一个数组中。然后该数组将作为参数传递给模板中的折线组件。我该怎么做？

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

我的 JSON 大致是这样的：

<l-polyline> 对象需要这样的数组来绘制线条：

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

路由列表（代码中jsonResult.routesList）

"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

您应该使用一种方法来计算要传递给其他组件的坐标数组。

// Vue component file
methods: {

  /*
   * Converts the stopsList array to an array of coordinates.
   * Example of returned value:
   *   [
   *     [ 23.1234, 21.2322 ],
   *     [ 21.1242, 24.2333 ],
   *   ]
   */
  getStopsCoordinates(stops) {
    return stops.map(stop => [ stop.lat, stop.long ]);
  }
}

当您经过所有停靠点的停靠点坐标时，您可以使用 getStopsCoordinates 方法，如下所示：

<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="getStopsCoordinates(route.stopsList)"></l-polyline>
    </div>
</div>

虽然它应该工作，但它不是最佳解决方案，因为列表在第二个 v-for 中每次都被转换并且可能不需要。有多种方法可以优化它，但没有测量等。我可能会选择 getter for routesList.

// Vue component file
getters: {

  /* Returns routesList where each route has property stopsCoordinates */
  routesListWithStopsCoordinates() {
    return this.jsonResult.routesList.map(route => {
      route.stopsCoordinates = this.getStopsCoordinates(route.stopsList);
      return route;
    })
  }
},

methods: {

  /* Already explained above */
  getStopsCoordinates(stops) {
    return stops.map(stop => [ stop.lat, stop.long ]);
  }
}

然后在你的模板中你可以这样做：

<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="route.stopsCoordinates"></l-polyline>
    </div>
</div>

希望有用。

Answer 2

我认为问题在于您使用 <div> 的方式，当您说：

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

在 v-for 中，您将每个单独的元素从 stopList 传递到 <l-polyline> 组件。我认为正确的方法是将整个 stopList 传递给组件，然后相应地格式化它（迭代 stopList 数组是在 <l-polylist> 组件内部完成的。

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

当然这不是最佳方法，但它会解决您的问题，更好的方法是使用基于 Dawid Zbiński 的想法并使用计算的属性。希望对您有所帮助

Vue.js - 如何在使用 v-for 时填充数组

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

arrays

vuejs2

v-for