Question

我正在使用Vue构建Google Maps应用。（我使用.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,
});

MapComponent.vue

中的

InfoWindow 部分

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>`,
});

MapComponent.vue

中的

EventListener 部分

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]
  )
});

我现在正在努力的是如何使InfoWindow部分中的<button>调用methods中定义的函数，看起来像这样

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

现在，当我单击按钮时，它什么也不做，没有警告，没有任何错误。

我应该怎么做才能使它工作？

注意：

我已经搜索并找到了这个similar question。但是，这不适用于我的情况，因为我使用this way导入（更改导入方式为时已晚）。当我在该问题中使用解决方案时，出现了TypeError: vm is undefined错误。所以它对我没有帮助。

提前谢谢！

Answer 1

将vue分配给诸如

的常量

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

然后我通常为其分配一个引用：

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

然后您可以使用

来使用组件中的所有方法

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

单击Google Maps的InfoWindow中的按钮时，如何在方法内部调用函数？

1 个答案: