DJWOMS1
@DJWOMS1
Веб-программист

Как работать с модальными окнами в vue.js?

Здравствуйте, к примеру есть список магазинов, который получаю ajax запросом, затем в таблице при нажатии на кнопку подробнее должно появиться модальное окно с описание магазина и яндекс или гугл картой где этот магазин находиться.
Что бы получить данные по конкретному магазину отправляю ajax запрос с id выбранного магазина.
Вопрос №1: Модальные окна лучше делать компонентом?
Вопрос №1.1: Как в таком случае передать данные которые пришли в окно?
Вопрос №2: Как внутри vue получить данные для карты?
methods: {
  // Модальное акно
      open: function(){
          axios.get("{% url 'proxy:ajax_magazin' %}",{
              headers: {
                  'X-Requested-With': 'XMLHttpRequest'
              },
              params: {
                  id: this.selecId
              }}).then((response) => {
                      this.modals =  response.data
              }).catch(function (error) {
                      this.selected = error;
                  });
          ymaps.ready(function(){
              var map = new ymaps.Map("map", {
                  center: [this.lat, this.lon],
                  zoom: 7
              });
          });
          this.active = true
      },
      close: function(){
          this.active = false
      }
  }

Вот данные которые приходят
"modals": [
    {
      "country": "Bangladesh",
      "city": "Tangail",
      "lat": "24.25",
      "lon": "89.916672",
      "gmt": "6.0",
      "update": null,
      "created": "2017-08-07T07:37:01.109197Z",
      "online": null,
    }
  ],

Как получить данные типа this.modals.lat?
ymaps.ready(function(){
                          var map = new ymaps.Map("map", {
                              center: [this.modals.lat, this.modals.lon],
                              zoom: 7
                          });
                      });
  • Вопрос задан
  • 834 просмотра
Решения вопроса 1
teknik2008
@teknik2008
Расскажите про GOLANG. Мне интересно
1)Лучше сделать компонентом. И через v-if показывать.
2)Так-же как и однонаправленный поток данных, через props
3) Опять таки через props. Если вы будете использовать v-if - то ваш компонент будет перерисовываться каждый раз при вызове, те предыдущие данные карты будут стерты. Чтобы показать карту, можно на момент монтирования подписаться на событие ymaps.ready и в методе уже нарисовать карту.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы