Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

randomsheep's avatar

Vue.js v-if and google maps

I have 2 modules: Main (Vue staff) and maps.js (google maps api - init, markers etc).

Gmaps module is called in Main like this:

this.maps = new Maps(this);

I have added a marker click listener (yep, it's working) - callback is updating vue data, BUT:

In my Vue init

new Vue({
    data: {
        showdiv: false
    },
    events: {
        updatediv: function(){
            this.showdiv = true;
            console.log("Showdiv");
        }
    },
    template: require('./mytemplate.html')
});

And i emit this in "Map" module:

    parent.vue.$emit('updatediv'); 

This writes string "Showdiv" to console, but why it does not update UI, when i have v-if="showdiv" in html? On button click and using methods, it working (when i don't use google map marker clicklistener.

0 likes
0 replies

Please or to participate in this conversation.