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

Question

[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>

Answer 1

[Владимир Проскурин]

Вот тут

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];
        });

Comments

[nurzhannogerbek]

Спасибо, надо изучить особенности стрелочной функции более подробно.

[Владимир Проскурин]

NogerbekNurzhan, тут даже не стрелочные функции, а понимание контекста функций. Вашу проблему можно было решить несколькими способами
- предварительно создать ссылку на this

var self = this;
placemark.events.add('click', function (e) {
    self.visible = true;
});

- используя bind

placemark.events.add('click', (function (e) {
    this.visible = true;
}).bind(this));

- вывести сеттер.
и.т.д.
Вот это все почитайте https://learn.javascript.ru/objects-more

[nurzhannogerbek]

Владимир Проскурин, Спасибо! =)