add/remove markers on zoom

[janeschindler]

I have a v-for loop for my markers that loops through a computed property visibleMarkers. Then on zoom (via v-on:zoomend="zoomhandler"), I want to change the visibleMarkers array to show some markers and hide others. I can get visibleMarkers to update during my zoom handler, but that doesn't change anything about the markers shown on my map. As a simpler experiment, I tried adding a random new marker to the markers array on zoom by pushing some values to the markers array. This doesn't have any effect either (code below). Does anyone have any pointers as to what I might be missing? Thanks.

<template>
  <MglMap 
    :center.sync="center"
    :accessToken="accessToken" 
    :mapStyle="mapStyle" 
    v-on:zoomend="zoomhandler"
  >
      <MglMarker 
          v-for="(place, i) in places"
          v-if="place.eb_place_vis == true"
          :key="i + '_' + place.eb_place_vis"
          :coordinates="[place.eb_place_lng, place.eb_place_lat]"
          v-on:click="markerClickHandler(place)"
          color='green'
      >
        <span>{{ place.place_id }}</span>
      </MglMarker>
  </MglMap>
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglMarker, MglGeojsonLayer } from "vue-mapbox";

export default {
  components: {
    MglMap,
    MglMarker
  },
  data() {
    return {
      center: [50, 50],
      accessToken: 'MYKEY', // your access token. Needed if you using Mapbox maps
      mapStyle: 'mapbox://styles/mapbox/streets-v11', // your map style
      currentZoom: 1,
      places:[]
    };
  },
  
  methods: {
    zoomhandler: function(info){
        //problem: this changes the computed array, but doesn't update the app.
        var zoom = info.map.getZoom();
        this.currentZoom = zoom;
        this.places.push({
            place_title: 'New Place',
            place_id: 948238,
            eb_place_coords: '{"lng":80,"lat":80}',
            eb_place_vis: true,
        });
        console.log(this);
    }
  },
  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};
</script>

[itomxi]

Confirming. I have the same problem. Any workarounds?

[janeschindler]

I put a 10 millisecond delay and that worked. I can post what I did this evening.

[itomxi]

Where exactly did you put the delay?

[janeschindler]

In my methods. Here's an example (the zoomhandler has a delay that calls a function that changes an object property that results in a computed property that filters the markers)

 methods: {
    async zoomhandler(info){
        var zoom = info.map.getZoom();
        this.currentZoom = zoom;
        info.map.resize()
        setTimeout(() => 
            setEbPlaceZoomVis(this.places, zoom),
            10
        );
    }
  },

[itomxi]

Okay. That works. There is no need to add the delay though. Just use setTimeout without second parameter, so that the setEbPlaceZoomVis takes place at the end of event loop.