如何将事件侦听器附加到Mapbox GL地理编码器搜索输入？(Vue应用)

<template>
  <div>
    <input ref="searchInput" type="text" placeholder="Search location">
    <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

export default {
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    const map = new mapboxgl.Map({
      container: this.$refs.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    });

    const geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
      placeholder: 'Search location'
    });

    this.$refs.searchInput.appendChild(geocoder.onAdd(map));

    geocoder.on('result', (e) => {
      // 处理搜索结果
      console.log(e.result);
    });
  }
}
</script>