Как добавить точку на карте yandex map в Vue 3?

Question

[Илья Кочкин]

Добрый день существует проблема при добавлении точки на карте если мы используем vue 3 я имею ввиду что если мы делаем инициализацию карты через

data(){
return {
map:null
}
},
methods:{
    initMap() {
       this.map = new ymaps.Map(this.$refs.map, {
        center:this.center,
        controls: [],
        zoom: this.zoom
      });
},
  mounted() {
    this.initMap()

  }

а потом пытаюсь добавить точку на карте через

this.map.geoObjects.add(myPlacemark)
то происходит ошибка

если я делаю не через this а, через переменную то ошибки не происходит и все хорошо

let map;
...
initMap() {
       map = new ymaps.Map(this.$refs.map, {
        center:this.center,
        controls: [],
        zoom: this.zoom
      });

, я почему то думаю что тут проблема из за proxy vue3 но как решить данную проблему - не знаю

Answer 1

[0xD34F]

думаю что тут проблема из за proxy

Тогда попробуйте получать оригинальный объект и работать уже с ним:

Vue.toRaw(this.map).geoObjects.add(placemark);

Или изначально не делайте его реактивным:

this.map = Vue.markRaw(new ymaps.Map(this.$refs.map, {
  ...

Comments

[Илья Кочкин]

Спаcибо, все получилось

Answer 2

[amrskv]

Мне помогло объявление карты не как реактивного объекта

https://v3.ru.vuejs.org/ru/api/refs-api.html#shallowref

import { onMounted, ref, shallowRef, watch, nextTick } from 'vue'

const myMap = shallowRef({})

const initMap = () => {
  myMap.value = new ymaps.Map('map', {
    center: actualCity.value.coords,
    zoom: 12,
    controls: []
  }, {
    searchControlProvider: 'yandex#search'
  })
}