Google maps 在vue组件内的javascript实例化组件上添加事件处理程序。（google.maps.DirectionsRenderer）

我们有一个vue应用程序，其中包含一个使用google directions API的google应用程序组件。 为此，我们启动映射，并创建DirectionsService实例和DirectionsRenderer实例。我们需要在路由更改时调用一个函数

methods: {
    initMap() {
      if (this.$refs.baseMap) {
        this.$refs.baseMap.$mapPromise.then(map => {

          this.directionsService = new google.maps.DirectionsService

          this.directionsRenderer = new google.maps.DirectionsRenderer({
              draggable: true,
              map: map,
            })

          this.directionsRenderer.addListener('directions_changed', 
            function() {
              this.computeTotalDistance()  // I need this to be a called when the direction change
            }
          )
        })
      }
    },
    computeTotalDistance(){
      // do some code
    }

---

上面的代码不理解什么是“this”，因为它位于addListener函数中。如何使其工作？

将变量引用添加到

此

应能工作：

const self = this
this.directionsRenderer.addListener('directions_changed', 
     function() {
         self.computeTotalDistance()  // I need this to be a called when the direction change
      }
)

副本