I am currently in the process of transitioning a map website to Vue.
The current website functions using vanilla JS, where it fetches JSON data from a public API and constructs 1) a sidebar that displays a list of cards and 2) a map.
Upon migrating to Vue, I decided to separate these two functionalities into distinct components, as shown below:
<template>
<div>
<CardsList :cards-data="this.info" />
<Map :cards-data="this.info" />
</div>
</template>
However, encountering issues as Mapbox is only initialized within the Map component. This poses difficulties when trying to implement event handlers in the Cards List component, which are meant to interact with the map. The entire process seems overly complex for such a simple task.
I am now questioning my approach. Should the Map be initialized within App.vue and have the sidebar as the sole component? Would Mapbox GL JS expressions like map.getLayer be accessible within the component?