Question

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

我添加了一个代码片段，用于在地图中添加几个按钮，但是当我点击按钮时，它不会调用任何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实例属性或方法交互的弹出窗口，这将是双向数据绑定

由于

Answer 1

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

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

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

1 个答案: