When using MapboxGeocoder component, how can I update the input value if I drag a default marker?

[Gonzalo-Bruna]

Currently I have a map, where I can do searches using MapboxGeocoder, and I am also using a draggable MapboxDefaultMarker, so the marker can be dragged around. I am using v-model (as suggested in the documentation) to check for changes in the MapboxGeocoder, however, when the marker is dragged, I trigger an update to the v-model but the input doesn't update it's value. Here's somewhat what I have:

<MapboxGeocoder v-model="geocoderResult" position="top-left" @result="(result) => flyToLocation(result)" :options="{ placeholder: 'Buscar', marker: false, language: 'es', countries: 'cl' }" />

then on the script I have this:

geocoderResult = ref("");

and finally, when the dragend event in the marker is fired, this is called:

geocoderResult.value = data.value.features[0].place_name;

However, the input in the MapboxGeocoder never updates.

Is there a way to handle this?

[AlexLavoie42]

This should be possible but you will have to access the geocoder's input element. Unfortunately it doesn't seem this is documented anywhere by mapbox and it is not defined in typescript so I have not officially supported this. However, I have found you can access the element through the _inputEl property on the geocoder.

To do this you will need to access the geocoder through the components ref: https://alexlavoie42.github.io/Nuxt-Mapbox/usage/controls#geocoder

[Gonzalo-Bruna]

thanks, will try it out and let you know!

[Gonzalo-Bruna]

it certainly worked! I simply used this:

const address = await getReverseGeocodingData(markerCoordinates.value);
geocoder.value._inputEl.value = address;

and it updates the input element. Thanks for the help!