search

cristijora / vue-tabs

Simplified bootstrap tabs
https://cristijora.github.io/vue-tabs/#/
MIT License
251 stars 72 forks source link

tab-change google maps #47

Closed bonekost closed 6 years ago

bonekost commented 6 years ago

If google maps is placed in another tab than first it has to be resized for showing (according to this stackoverflow.com)

but if you use it with tab-change event it doesn't work

e.g:

methods: {
      handleTabChange(tabIndex, newTab, oldTab){
          window.google.maps.event.trigger(document.getElementById('regularMap'), 'resize')
      }
}
cristijora commented 6 years ago

@bonekost hello Could you provide a small codesandbox/jsifddle with that so I can help easier. Until then I can only suggest maybe doing that in $nextTick as that event occurs before actually it's displayed in DOM.

handleTabChange(tabIndex, newTab, oldTab){
        this.$nextTick(()=> {
            window.google.maps.event.trigger(document.getElementById('regularMap'), 'resize')
        })

      }

If that doesn't work please provide a fiddle example. If it works we will have to close the issue as $nextTick is more Vue core related

bonekost commented 6 years ago

@cristijora it works with $nextTick for me. Thanks