How to call a function inside methods when click a button in a Google Maps' InfoWindow?

Question

I'm building a Google Maps app using Vue. (I use .vue instead of single file component)

i have a number of markers on the map and an InfoWindow tie to each of them with this code.

Markers section in the MapComponent.vue

this.markers[layer.lyr_id][node.nod_id] = new google.maps.Marker({ icon: { scaledSize: configuration.marker.icon.scaledSize, url: layer.icon_nod_sub_url, }, position: { lat: node.lat, lng: node.lon, }, map: mapCanvas, });

InfoWindow section in the MapComponent.vue

this.infoWindows[layer.lyr_id][node.nod_id] = new google.maps.InfoWindow({ content: `<strong>${node.dflt_name}</strong> <p>${node.dflt_info}</p> <button v-on:click="this.addToPath(${node.nod_id})">Add this node to the path</button>`, });

EventListener section in the MapComponent.vue

this.markers[layer.lyr_id][node.nod_id].addListener('click', () => { this.infoWindows[layer.lyr_id][node.nod_id].open( mapCanvas, this.markers[layer.lyr_id][node.nod_id] ) });

What I'm struggling right now is how to make the <button> in the InfoWindow section calls a function defined in the methods which looks like this

methods: { ... addToPath(nod_id) { alert(nod_id) console.log(nod_id) } ... }

Right now when I click the button it does absolutely nothing, no warning, no error at all.

What should I do to get it work?

Note:

I have searched and found this similar question. However, it doesn't work for my case because I use this way to import (which it would be too late to change the way to import). When I use the solution in that question, I got the error that says TypeError: vm is undefined. So it didn't help me.

Thank you in advance!

Possible duplicate of Call a Vue JS component method from outside the component — Mel Macaluso
– Mel Macaluso, Commented Jan 11, 2019 at 12:36
@MelMacaluso I don't get it. How should I do that with module .vue files? Where should I put the document.getElementById() and the vm? I'm really new to Vue, hope this won't be too much trouble. — MongoLato
– MongoLato, Commented Jan 11, 2019 at 16:04
Wherever you registered your Vue instance assign it to a constant as specified. Then wherever you call your component just add a ref. Then outside vue wherever you use write your js code you reference it as indicated. Try and let us know how it goes editing your answer. — Mel Macaluso
– Mel Macaluso, Commented Jan 11, 2019 at 16:23
@MelMacaluso I have tried the method from the thread you gave, however, the situation is quite different. Mine is more like this, which of course isn't working. What should I put in the onclick="" to make it work? (Seems like doing document.getElementById() wouldn't work well. Thanks — MongoLato
– MongoLato, Commented Jan 13, 2019 at 10:38

Mel Macaluso · Accepted Answer · 2019-01-11 12:36:25Z

Assign vue to a constant such as

const vm = new Vue({ el: '#app', components: { 'map-component': MapComponent } });

I then usually assign a ref to it:

<map-component ref="map-component">...</map-component>

And then you can all the methods inside the component with

vm.$refs.map-component.addToPath()

Collectives™ on Stack Overflow

How to call a function inside methods when click a button in a Google Maps' InfoWindow?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related