Почему яндекс карта открывается в нужных координатах только со второго раза?

Question

[stavfz]

Есть компонент vue

<template>
  <div class="modal fade dispatch-modal" id="dispatch-modal" tabindex="-1" aria-labelledby="dispatch-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header justify-content-between justify-content-md-end">
          <!-- <a class="modal-link" href="#">Проложить маршрут</a> -->
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <yandex-map 
            :coords="getCord"
            :zoom="16"
          >
             <ymap-marker 
              :coords="getCord" 
              marker-id="123"
              :icon="getIcon"
              marker-type="placemark"
              ></ymap-marker>
          </yandex-map>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
import {mapGetters} from 'vuex'
export default {
  name: "Dispatch-modal",
  components: { yandexMap, ymapMarker },
  computed: mapGetters(['getCord','getIcon']),
  
  data(){
    return{
      
    }
  }

  
}
</script>

Это модальное окошко которое открывается при клике на строчке с адресом на странице

<div class="arrival-place  table-link" 
       data-bs-toggle="modal" 
       data-bs-target="#dispatch-modal" 
       v-on:click="updateCords(flight.to_yam),updateIcon(flight.to_name)">
             {{flight.to_address_point}}
</div>

Модуль в store под это дело выглядит так:

export default {
    state: {

        coords: [
            50.055522,
            50.998846
        ],
        icon: {
            content: 'Данные загружаются',
            color: 'red'
        }
    },
    mutations: {
        newCords(state, coords) {
            state.coords = [
                coords.split(',')[0],
                coords.split(',')[1]
            ]
        },
        newIcon(state, icon) {
            console.log(icon);
            state.icon = {
                'content': icon,
                color: 'red'
            }
        }
    },
    actions: {
        updateCords(ctx, coords) {

            ctx.commit('newCords', coords)
        },

        updateIcon(ctx, icon) {

            ctx.commit('newIcon', icon)
        },

    },
    modules: {},
    getters: {
        getCord(state) {
            return state.coords
        },
        getIcon(state) {
            return state.icon
        }
    }

}

Проблема вот в чем, попробую описать хронологически:
1 загружается страница
2 нажимаем на строчку с адресом клик по которой провоцирует "поднятие" того самого окошка-модуля который описан выше. как и ожидается появляется бутстраповский попап с картой но карта отображается на тех координатах которые прописаны в state а вот иконка на карте стоит в тех координатах что и ожидалось.
при этом в консоль выпадает:

GEThttps://api-maps.yandex.ru/services/coverage/v2/?l=map&ll=NaN,NaN&z=16&lang=ru_RU&callback=jsonp_yandex_coverage__l_map_ll_NaN_NaN_z_16_lang_ru_RU
[HTTP/2 400 Bad Request 98ms]
Загрузка <script> по адресу «https://api-maps.yandex.ru/services/coverage/v2/?l=map&ll=NaN,NaN&z=16&lang=ru_RU&callback=jsonp_yandex_coverage__l_map_ll_NaN_NaN_z_16_lang_ru_RU» не удалась. 190:1:1

3 закрываем бутстраповский попап
4 опять кликаем по адресу (неважно по тому же или по любому другому) Снова открывается наш попап но тут уже получаем карту в нужных координатах с иконкой в нужных координатах.

Получается что после первого открытия попапа все последующие ведут себя как надо нет никаких ошибок и какрта и иконки с правильными координатами так как нужно.

При первом открытии карты, в state происходят именно те изменения что и ожидается при последующих вызовах этого окошка происходит ровно тоже что и при первом его открытии, меняются координаты и текст для иконки

Единственное что не повторяется при дальнейших открытиях карты это не вываливается в консоль никаких ошибок.

Уже несколько подходов делал к этой странности в обще сложности часов 5 точно на неё убил, но никак ума не могу ей дать. Может кто то сталкивался с такой проблемой или в моём "быдлокоде" увидит что я делаю не так.

Откуда берется ошибка понять тоже не смог просмотрел код Vue-yandex-maps но либо я слепой, либо тупой, либо и то и другое сразу, не могу понять где происходит тот самый ошибочный GET запрос который возвращает 400-ый код

Уж очень хочется сделать так чтобы карта с первого раза открывалась правильно.
Заранее спасибо за конструктивную критику и помощь

Answer 1

[stavfz]

Отвечаю сам себе :) Возможно это не единственное решение но если установить таймаут на изменение координат то всё работает нормально
меняем это:

updateCords(ctx, coords) {

            ctx.commit('newCords', coords)
        },

на это:

updateCords(ctx, coords) {
            setTimeout(() => {
                ctx.commit('newCords', coords)
            }, 500)

        },

и всё работает как ожидается но немного странно выглядит такое решение.

Answer 2

[B0bson]

Тоже столкнулся с этой проблемой, потерял много времени. Напишу своё решение, вдруг кому-нибудь пригодится. Действительно эта ошибка возникает только если карта расположена в модальном окне. Пробовал координаты выдавать через computed() с использованием проверки массива со значениями координат на NaN, всё равно в первом запросе при перезагрузке страницы получал &ll=NaN,NaN и ошибку 400.
В итоге проблема решилась запретом рендеринга яндекс карты в модальном окне при открытии страницы. Если рендерить карту при открытии модального окна данная ошибка не возникает.

<template>
  <div>
    <button data-bs-toggle="modal" data-bs-target="#location-modal" @click="showMap = true">Открыть</button>

    <div id="location-modal" class="modal fade" tabindex="-1" aria-labelledby="location-modal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
          <div class="modal-body">
            <yandex-map v-if="showMap" :coords="coordinates" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMap: false,
      coordinates: [0, 0]
    }
  }
}
</script>