how to invalidateSize leaflet map in vue js?

Question

i'm using vue-nav-tabs plugin, and using @tab-change="handleTabChange" event for tab changes.

i'm using tabs in parent component

methods: {
    handleTabChange() {
        this.$refs.map.invalidateSize();
    }
}

this is Map(child component)

methods: {
     invalidateSize() {
                this.map.invalidateSize(true);
                console.log(true)
     }
}

this invalidateSize method run successfully but map doesn't re render.

what should i do?

Answer 1

The tab-change event of Vue-tabs plugin is emitted synchronously with the actual operation to perform the tab navigation. Therefore most likely the new tab has not appeared yet when the event fires.

Using a short timeout after the event should give some time for the tab to appear, and invalidateSize will then be able to get the correct map container dimensions.