How to reference FeatureGroup?

[airmalik]

I'd like to wrap markers within a featureGroup and then reference that feature group from the script. I'm using this.$refs to get a reference to the featureGroup inside the mounted hook. But the reference is null unless I wait at least a millisecond before accessing it.

  mounted: function () {
    // const fg = this.$refs.features.mapObject
    // console.log(fg.getBounds())
    // The above gives null error
    
    // This works
    setTimeout(this.bounds, 1)
  },
  methods: {
  	bounds: function () {
    	console.log(this.$refs.features.mapObject.getBounds())
    }
  }

I'm assuming this is because the slot in the LFeatureGroup.vue template isn't created until ready=true:

<template>
  <div style="display: none;">
    <slot v-if="ready" />
  </div>
</template>

...

  mounted () {
    this.mapObject = featureGroup();
    propsBinder(this, this.mapObject, this.$options.props);
    DomEvent.on(this.mapObject, this.$listeners);
    this.ready = true;
    this.parentContainer = findRealParent(this.$parent, true);
    if (this.visible) {
      this.parentContainer.addLayer(this);
    }
  }

So what's the correct way of getting a reference to the featureGroup without the timeout hack?

Live Demo

Here's the fiddle showing the issue: https://jsfiddle.net/fghrqe2n/1/

[DonNicoJs]

@airmalik hi thank you for the issue! I think that feature group should have a ready event, I will add it shortly! Or if you could open a pr it would be wonderful!

[DonNicoJs]

@airmalik 2.1.0 is out with ready event on all the component

[bezany]

@airmalik @DonNicoJs
Look like need $nextTick.
ready event may be helpful another situation. In this situation $nextTick need always?
See my example

[DonNicoJs]

@bezany nice catch, maybe we should modify the ready event to be fired only after $nextTick what do you think ?

[bezany]

@DonNicoJs Yes, very good suggestion!
Now ready event same as mounted hook.
With$nextTick it is will be more useful.
Exmaple with ready-nextTick