Могу ли я получить возвращаемое значение из пользовательских директив vue? - PullRequest
Новая
       28

Могу ли я получить возвращаемое значение из пользовательских директив vue?

0 голосов
/ 14 сентября 2018

Я написал пользовательскую директиву, которая составляет карту Google. 

Vue.directive('gmap', {
  inserted: function (el) {
    return new google.maps.Map(el, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    })
  }
})

<div v-gmap ref="map" style="height: 360px"></div>

Это работает, и я вижу карту.

А затем я хочу нарисовать маркер на карте, и мне нужен объект Google Maps для этого.

Могу ли я получить возвращаемое значение из директив v-gmap? 

mounted () {
    const map = this.$refs.map

    const marker = new google.maps.Marker({
      position: { lat: -34.397, lng: 150.644 },
      map: map,
      title: 'Hello World!'
    });
  }

Не работает.

карта - это просто элемент HTML ..

1 Ответ

0 голосов
/ 14 сентября 2018

Вы должны создать компонент вместо директивы для этого: 

Vue.component('gmap', {
  template: '<div/>',

  mounted() {
    this.map = new google.maps.Map(this.$el, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });

    const marker = new google.maps.Marker({
      map: this.map,
      position: { lat: -34.397, lng: 150.644 },
      title: 'Hello World!',
    });
  },
});

<gmap style="height: 360px"/>

Это, конечно, только начало. Вы можете пропустить маркеры через опору, если хотите, чтобы маркеры контролировались извне из компонента; Вам решать, как вы хотите, чтобы он функционировал.

...