Как вызвать функцию, используя @click внутри информационного окна карт Google в vue js? - PullRequest
Новая
       13

Как вызвать функцию, используя @click внутри информационного окна карт Google в vue js?

0 голосов
/ 08 ноября 2018

Мой текущий код 

addpolygon: function(e) {
      var vm = this;
      var point = {
        lat: parseFloat(e.latLng.lat()),
        lng: parseFloat(e.latLng.lng())
      };
      vm.coord.push(point);
      vm.replot();
      vm.marker = new google.maps.Marker({
        position: point,
        map: vm.map,
        icon: "/fred.png"
      });
      vm.infowindow = new google.maps.InfoWindow({
        content:"<a class=\"btn btn-danger\" @click.native=\"removePoint("+vm.markerid+)\">Remove</a>",
        maxWidth: 300
      });
      vm.bindInfoWindow(vm.marker, vm.map, vm.infowindow);
      vm.markers[vm.markerid] = {
        marker: vm.marker,
        point: point
      };
      vm.markerid++;
    },

Когда я нажимаю на Удалить, мне нужно вызвать другую функцию удаления Точки.

Я определил это как 

removePoint: function(id) {
      alert("adsf")
    },

Но я не могу вызвать то же самое, используя приведенный выше код. Ничего не происходит, когда я нажимаю на кнопку удалить. В чем проблема относительно того же. Пожалуйста, помогите мне найти решение?

1 Ответ

0 голосов
/ 08 ноября 2018

Новое решение

Вызовите глобальный метод из InfoWindow, используя простой старый обработчик кликов. 

`onclick="removePoint(${vm.markerId})"`

Затем используйте замыкание для доступа к виртуальной машине из глобального метода.

const vm = this window.removePoint = function(id) { vm.removePoint(id) }

Если у вас есть несколько экземпляров, вам необходимо расширить этот подход.

Старое решение

Здесь есть 2 вопроса.

Сначала исправьте синтаксическую ошибку в кавычке.

vm.markerid + ")\">Remove</a>"

Еще лучше, воспользуйтесь шаблонными строками, чтобы избежать такого безумия цитат. 

vm.infowindow = new google.maps.InfoWindow({ content:`
<a class="btn btn-danger" @click.native="removePoint(${vm.markerid})">Remove</a>`, maxWidth: 300 });

Во-вторых, любая функция внутри шаблона Vue всегда находится в области действия компонента. Предположим, что this. объект находится впереди. Так что звонить removePoint - это действительно звонить this.removePoint.

Определить функцию внутри экземпляра.

vm.removePoint = function(id) { console.log(`removing point ${id}...`) }

Или убедитесь, что параметры вашего компонента определяют removePoint в разделе methods.

Вы также можете определить removePoint глобально (для объекта окна) и вызвать $window.removePoint(" + vm.markerId + ")" из шаблона, если используете плагин, такой как https://www.npmjs.com/package/window-plugin.

@click.native=\"$window.removePoint(" + vm.markerid ...

function removePoint(id) { console.log(`removing point ${id}...`) }

...