How to hide all points on the map when clicking on 1 of them?

Question

Vue.js

Good evening! I have something like this

A photo

It has points on the map, when you click on a point, a description of the point appears above it, the name of the city + link.
Here is the component code:

<div
            class="point_wrap"
            :style="{
                left: point.map_x + '%',
                top: point.map_y + '%'
            }"
    >

        <div class="point" @click="tooltipToggle"></div>

            <div class="pointTooltip" v-if="tooltipVisible">
                <div class="pointTooltipTitle">{{ point.name }}</div>
                <a
                        href=""
                        class="pointTooltipGo"
                        @click.prevent="openPanorama"
                >Начать прохождение</a>
            </div>
    </div>

export default {
data(){
        return {
            tooltipVisible: false
        };
    },

methods: {
        tooltipToggle(){

            this.tooltipVisible = !this.tooltipVisible;

        }
}
}

How to hide all points on the map when clicking on 1 of them? After all, each point is a separate component. There is 1 idea, generate an event in the tooltipToggle and listen to it in the parent and hide everything except the one that is clicked

Answer 1

Yes, do it. When a point is clicked, it generates an event; in the parent, the handler hides everything except this point.