Leaflet Routing Machine行程容器未显示在Vue模板中

Question

因此，当我尝试将Leaflet Routing Machine与Vue中的组件结合在一起时，我遇到了一个奇怪的问题。

在我的L.Routing.Control上运行.getPlan（）之后，我尝试使用.onAdd（）获取行程容器。我将其添加到组件的数据中，然后使用v-html在模板中将其打印出来。

---

脚本：

data () {
  return {
    currentStep: 'search',
    mode: this.initialMode,
    currentLocation: {},
    geocoder: new L.Control.Geocoder.Nominatim(),
    routingControl: new L.Routing.Control({ // <-- The routing control
      showAlternatives: false,
      createMarker: (i, wp, nWps) => {
        return L.marker(wp.latLng, {
          icon: L.icon({
            iconUrl: 'img/icons/DotIcon.png',
            iconSize: [33, 50],
            iconAnchor: [16, 50],
            popupAnchor: [0, -40]
          })
        })
      },
      lineOptions: {
        addWaypoints: false
      },
      router: L.Routing.mapbox(this.accessToken, {
        profile: 'mapbox/driving'
      }),
      formatter: new L.Routing.Formatter({
        units: 'imperial'
      })
    }),
    formatter: new L.Routing.Formatter(),
    itinerary: null,
    to: {},
    from: {}
  }
},

...

methods: {
  getDirections () {
    if (typeof this.from === 'undefined' ||
      typeof this.to === 'undefined') {
      return false
    }

    let waypoints = [
      [this.from.coordinates.lat, this.from.coordinates.lng],
      [this.to.coordinates.lat, this.to.coordinates.lng]
    ]

    this.$root.$emit('set-routing-control', this.routingControl)

    this.routingControl.setWaypoints(waypoints)

    let results = this.routingControl.getPlan()
    let map = results._map

    this.itinerary = this.routingControl.onAdd(map) // <-- Where I attempt to get the container

    this.currentStep = 'results'
  }
}

模板：

<div v-else-if="currentStep === 'results'">
  <span v-html="itinerary"></span>
</div>

输出：

<div data-v-38a90df8="" data-v-8dc7cce2="">
  <span data-v-38a90df8="">{
  "_leaflet_events": {}
  }</span>
</div>

---

我使用this post中记录的路线来获得行程集装箱。

当我运行console.log(this.itinerary)时，我会在控制台中收到此消息：

模糊的内容是正确的位置信息。

希望这是足够的信息，可以使您了解可能出了什么问题。随时让我知道是否需要更多信息。

---

编辑

我能够使用jQuery和ref将容器强行插入插槽，但这是草率的，如果可能的话，我仍然更喜欢使用v-html。这是对临时修复感兴趣的人的代码。

脚本：

methods: {
  async getDirections () {
    if (typeof this.from === 'undefined' ||
      typeof this.to === 'undefined') {
      return false
    }

    let waypoints = [
      [this.from.coordinates.lat, this.from.coordinates.lng],
      [this.to.coordinates.lat, this.to.coordinates.lng]
    ]

    this.$root.$emit('set-routing-control', this.routingControl)

    this.routingControl.setWaypoints(waypoints)

    // I modified the way I get the map here a bit, but it's the same map
    this.itinerary = this.routingControl.onAdd(this.routingControl._map) // <-- Get the itinerary in the same way as before

    this.currentStep = 'results'

    await this.$nextTick() // <-- Wait until the div is loaded into the DOM

    $(this.$refs.results).append(this.itinerary) // <-- Get the div and append the Itinerary container
  }
}

模板：

<div ref="results" v-else-if="currentStep === 'results'" />