CODEWITHSUNDEEP
javascriptvue.jsmapbox-gl-js
east1999
east1999

Reputation: 199

How to trigger Mapbox events from another Vue component?

I'm trying to move a map website to Vue.

The website works in vanilla JS, fetching JSON from a public API and building 1) a sidebar with a list of cards and 2) a map.

In Vue it seemed obvious that I split these two parts into different components, like so:

<template>
  <div>
    <CardsList :cards-data="this.info" />
    <Map :cards-data="this.info"  />
  </div>
</template>

Because Mapbox is only initialized within the Map component, I have a lot of trouble just to get some event handlers in my Cards List, since they're supposed interact with the Map. It just seems incredibly complicated for what it is.

What am I doing wrong? Should the Map be initialized on App.vue and the sidebar be the only component? Would Mapbox GL JS expressions like map.getLayer be available on the component?

Upvotes: 0

Views: 711

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126105

The usual pattern I use is to use an EventBus.

You can see an example of this here.

Upvotes: 1

Related Questions