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](https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component) — Mel Macaluso, Jan 11 '19 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, Jan 11 '19 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, Jan 11 '19 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](https://jsfiddle.net/fakezcmp/1/), 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, Jan 13 '19 at 10:38

score 1 · Accepted Answer · answered Jan 11 '19 at 12:36

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()

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

1 Answers1