Vue2leaflet: l-geo-json - how to keep layer in the background when more that 1 layer is used

[udos]

Versions

• Leaflet: v1.6.0
• Vue: v2.6.10
• Vue2Leaflet: v2.4.2

I am passing data (through prop _segments_) from a parent component to a child component which gets rendered in 2 _l-geo-json_ components:

<template>
  <div>
    <l-geo-json :geojson="segments" :options="{ bringToFront: true }" key="r" />
    <l-geo-json
      v-if="concatenate && routeSegments"
      :geojson="routeConcatenated"
      :options="{ bringToBack: true }"
      key="r_concat"
    />
  </div>
</template>

with the options _bringToFront_/_bringToBack_ I am trying to define the order of the layers but they are "ignored" (probably because I'm applying them wrong...).

I also tried to switch the sequence in which they are listed without success...

any suggestions what I'm doing wrong?

[DonNicoJs]

@udos Hi! leaflet bringToFront or bringToBack are a function!
You can assign two different refs to those two json and then use the function in the @ready callback of the GeoJson or the map or in the mounted lifecycle hook of the component that you are using ( inside a nextTick function )

Let me know if this helps!

[udos]

thanks! works!

I had to place it in the _updated_ lifecycle hook because _routeConcatenated_ is not computed on _mounted_:

updated() {
  this.$nextTick(() => {
    this.$refs.refRouteConcatenated.mapObject.bringToBack();
  });
},