Vue-Mapbox zoom events

Question

i was using vue-mapbox and wanted to get an event every time theres a zoom change, is that possible with vue-mapbox? or if i can use any other alternative options?

or as an alternative if theres a click event for the <MglNavigationControl /> component which controls the zoom?

it tried adding @click on the <MglNavigationControl @click="click" /> but it doesnt work

method : {
click(){
 alert('zoom button clicked')
}
}

Answer 1

AFAIK there's no event or action exposed in vue-mapbox for working with zoom events. You've to work around this by doing something like this:

<VueMapbox
  mapStyle="mapbox://styles/mapbox/streets-v9"
  accessToken="<token>"
  @load="onMapLoad"
/>

 methods: {
    onMapLoad({ map }) {
      map.on("zoomend", e => {
        alert('Zoom end: ' + e.target.getZoom());
      });
    }
  }