“TypeError：无法读取未定义的属性'name'，但值会正确计算

Question

我是javascript和vue的新手，我遇到了以下问题。

在这里，我想展示Google Map API DistanceMatrix服务的所有价值，因此这是computed ()

中的代码

places () {
  var idsToFind = this.$store.getters.loadedTrip(this.id).places
  var places = this.$store.state.loadedPlaces.filter(item => idsToFind.includes(item.id))
  var service = new google.maps.DistanceMatrixService()
  return places.map((place, i) => {
    var destination = this.$store.state.loadedPlaces.filter(item => idsToFind.includes(item.id)).slice(1)[i].name
    return {
      place: place,
      time: this.$store.getters.loadedTrip(this.id).timeEach[i],
      place2: this.$store.state.loadedPlaces.filter(item => idsToFind.includes(item.id)).slice(1)[i],
      durationTravelled: service.getDistanceMatrix({
        origins: [place.name],
        destinations: [destination],
        travelMode: 'TRANSIT'
      }, (response, status) => {
        var duration = response.rows[0].elements[0].duration.text
        console.log(duration)
        return duration
      })
    }
  })
}

不幸的是，我在控制台中得到的是

TypeError: Cannot read property 'name' of undefined

然而，当我在console.log中显示时，值正如我在控制台中预期的那样正确显示。

这个问题阻止我的页面被渲染，我无法解决它。

变量places包含保存数据库中某些位置数据的对象数组。此外，我做了slice(1)数组，因为当我循环遍历时，我需要显示该变量中的下一个对象。基本上，我嵌入了谷歌地图，显示了从模式A到B的方向，但我还想显示每次旅行所需的持续时间，然后点击它。

我有console.log控制台前3行显示的变量“destination”，并添加了屏幕截图：

第194行引用place: place,