Как сделать недействительными Размер карты листовки в VUE JS?

Question

Я использую плагин vue-nav-tabs и использую событие @tab-change="handleTabChange" для изменения вкладок.

Я использую вкладки в родительском компоненте

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

это Map (дочерний компонент)

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

этот метод invalidateSize успешно выполнен, но карта не отображается.

что мне делать?

Answer 1

Событие смены вкладок плагина Vue-tabs генерируется синхронно с фактической операцией по выполнению навигации по вкладкам.Поэтому, скорее всего, новая вкладка еще не появилась при возникновении события.

Использование короткого времени ожидания после события должно дать некоторое время для появления вкладки, а затем invalidateSize сможет получить правильный контейнер карты.размеры.