不会返回每个循环的值

Question

我的 Vue 组件中有一个条件 for-loop。我只想循环通过以“纽约”为目的地的火车站，或者“纽约”在路线上。

<tr v-for="departure in filterTrainStations" :key="departure.name">
            <td>{{ departure.product.categoryCode }}</td>
            <td>{{ departure.direction }}</td>
            <td>{{ getTimeFromDate(departure.actualDateTime) }}</td>
            <td>{{ departure.name }} </td>
        </tr>

这是我和for-loop 的桌子。它目前向我展示了所有以“纽约”为方向的火车。但也有其他方向的火车，但路线上有“纽约”。所以我也想检查那些。这是我计算出来的filerTrainStations 函数：

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        // Only return the trains which go to the right direction. 
        if(u.direction === city) {
            return u;
        }   

        // Check if there are any trains with the desired city on their route.
        u.routeStations.forEach(function (arrayItem) {
            if(arrayItem.mediumName === city) {
                console.log(u);
                return u;
            }                    
        })
    }
)},

应该从forEach 函数返回的值不会返回任何内容，但是当我console.log 它向我显示正确的信息时。

我的问题是：

为什么没有返回值u 的值？

我从 API 中检索出发信息的响应如下所示：

response: {
          "links": {},
            "payload": {
                "source": "PPV",
                "departures": [
                    {
                        "direction": "Weert",
                        "name": "NS  5249",
                        "plannedDateTime": "2019-10-10T15:08:00+0200",
                        "plannedTimeZoneOffset": 120,
                        "actualDateTime": "2019-10-10T15:08:00+0200",
                        "actualTimeZoneOffset": 120,
                        "plannedTrack": "1",
                        "product": {
                            "number": "5249",
                            "categoryCode": "SPR",
                            "shortCategoryName": "NS Sprinter",
                            "longCategoryName": "Sprinter",
                            "operatorCode": "NS",
                            "operatorName": "NS",
                            "type": "TRAIN"
                        },
                        "trainCategory": "SPR",
                        "cancelled": false,
                        "routeStations": [
                            {
                                "uicCode": "8400129",
                                "mediumName": "Boxtel"
                            },
                            {
                                "uicCode": "8400206",
                                "mediumName": "Eindhoven"
                            },
                            {
                                "uicCode": "8400245",
                                "mediumName": "Geldrop"
                            }
                        ],
                        "departureStatus": "INCOMING"
                    },
                ]
            },
            "meta": {}
          }

Answer 1

为什么没有返回值u的值？

因为return 语句只是从传递给forEach 的函数返回，它不会从外部filter 方法返回。您应该改用 find 并返回结果：

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        // Only return the trains which go to the right direction. 
        if(u.direction === city) {
            return u;
        }   

        // Check if there are any trains with the desired city on their route.
        return u.routeStations.find(arrayItem => arrayItem.mediumName === city);
    }
)},

但这引发了另一个问题 - 代码行本身位于 filter 中，您应该在其中返回 true 或 false，具体取决于您是否希望该项目包含在结果中。如果没有更多信息，很难调和您遇到的实际问题。但是，返回 anything truthy 将导致 departures 项目包含在结果中。

就个人而言，我会按照MKougiouris answer 的建议去做，因为它更清晰。

Answer 2

您的过滤器回调不适合您想要实现的目标。 试试下面这个：

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        return u.direction == city || u.routeStations.some(function(rs){ rs.mediumName == city});
    });
)}

如果这有帮助，请告诉我

编辑：进行了编辑以包含您的代码，以便您可以更轻松地了解如何使用它！