javascript - 如何通过单击谷歌地图内的按钮来调用 Vue js 的方法

Question

我正在使用一个名为 vue-google-maps 的包用于开发应用程序。

我添加了一个代码片段，用于在 map 中添加几个按钮，但是当我点击按钮时，它不会调用 vue 的任何方法。我该如何解决这个问题

这是我的代码

let search_result = document.createElement('div');
search_result.style.width = '300px';
search_result.style.margin = '10px';
search_result.style.fontSize = '16px';
search_result.style.backgroundColor = '';
search_result.style.cursor = 'pointer';
search_result.innerHTML = ' <button @click="test()" class="btn-primary" id="reset"><i class="fa fa-refresh" aria-hidden="true"></i> Reset </button>
<button @click="handleUndo()" class="btn-primary" id="undo"><i class="fa fa-undo" aria-hidden="true"></i> Undo </button>
<button @click="polygon_redo()" class="btn-primary" id="redo"><i class="fa fa-repeat" aria-hidden="true"></i> Redo </button> ';

this.$refs.gmap.$mapObject.controls[google.maps.ControlPosition.TOP_RIGHT].push(search_result);

drawingManager.setMap(this.$refs.gmap.$mapObject)

问题:当我点击撤消、重做、重置按钮时，它没有调用 vue js 的任何方法。

我需要建议，我如何在谷歌地图中添加按钮或任何可以与 vue 实例属性或方法交互的弹出窗口，这将是双向数据绑定(bind)

谢谢

Answer 1

在 Vue 中，你不应该通过 createElement 添加标记方法(或以任何其他方式直接从脚本)。通常，标记应在您的 <template> 中.你创建的标记不是 react 性的，也不是 Vue 可访问的，因为它是在组件初始化范围之外添加的。查看 Vuejs 文档以获取更多详细信息:https://v2.vuejs.org/v2/guide/syntax.html

要以有效的“Vue 方式”解决您的问题，您需要显示更多内容，最好是完整的组件。