@nurzhannogerbek

Как правильно передавать данные из одного компонента в другой?

Здравсвтуйте, товарищи! Помогите пожалуйста разобраться.

На Яндекс карте есть метки. При клике на них пытаюсь открыть информационное окно. Для информационное окно создал отдельный компонент InformationWindow. В этот компанент пытаюсь передать данные, которые получил при GET запросе. Проблема в том, что валится следующая ошибка:

Uncaught TypeError: Cannot set property 'visible' of null


YandexMap.vue:
<template>
    <div>
        <div id="yandex-map"></div>
        <InformationWindow :incidents="incidents" v-if="visible"></InformationWindow>
    </div>
</template>

<script>
data() {
    return {
        visible: false,
        incidents: {
            ADDRESS: '',
            DESCRIPTION: '',
        },
    }
},

...

axios.get('URL').then(response => {
    for (let item = 0; item < response.data.length; item++) {
        // Создать метку
        let placemark = new ymaps.Placemark([response.data[item]["LATITUDE"], response.data[item]["LONGITUDE"]]);

        // Нанести метку на Яндекс карту
        this.map.geoObjects.add(placemark);

        // Событие на нажитие метки
        placemark.events.add('click', function(e) {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });
    }
});
</script>


InformationWindow.vue:
<template>
    <div id="information-window">
        <div class="address">{{incidents.ADDRESS}}</div>
        <div class="description">{{incidents.DESCRIPTION}}</div>
    </div>
</template>

<script>
    export default {
        name: "InformationWindow",
        props: {
            incidents: {
                type: Object,
                required: true
            }
        }
    }
</script>
  • Вопрос задан
  • 200 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Вот тут
placemark.events.add('click', function(e) {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });

внутри callback функции вы теряете this, поэтому используйте стрелочную функцию
placemark.events.add('click', (e) => {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы