Как вызвать функцию внутри методов при нажатии кнопки в информационном окне Google Maps? - PullRequest
Новая
       37

Как вызвать функцию внутри методов при нажатии кнопки в информационном окне Google Maps?

0 голосов
/ 11 января 2019

Я создаю приложение Google Maps, используя Vue. (Я использую .vue вместо одного файлового компонента)

У меня есть несколько маркеров на карте и привязка InfoWindow к каждому из них с этим кодом.

Маркеры Секция в 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 раздел в 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 секция в 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]
  )
});

Сейчас я борюсь за то, чтобы заставить <button> в разделе InfoWindow вызывать функцию, определенную в methods, которая выглядит следующим образом 

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

Сейчас, когда я нажимаю кнопку, она абсолютно ничего не делает, ни предупреждения, ни ошибки вообще.

Что я должен сделать, чтобы это заработало?

Примечание:

Я искал и нашел похожий вопрос . Однако в моем случае это не работает, потому что я использую таким образом для импорта (что было бы слишком поздно, чтобы изменить способ импорта) . Когда я использую решение в этом вопросе, я получаю сообщение об ошибке TypeError: vm is undefined. Так что это не помогло мне.

Заранее спасибо!

1 Ответ

0 голосов
/ 11 января 2019

Назначить значение константе, такой как 

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

Я обычно назначаю ему ссылку: 

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

И тогда вы можете использовать все методы внутри компонента с помощью 

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