[BUG Feedback] Cannot use vc-entity in child component

[adlaws]

Browser version number Chrome Version 79.0.3945.88 (Official Build) (64-bit)

Vue version number Vue v2.6.10

Component library version number vue-cesium v2.0.4

Symptom Hi! I love your work - this looks fantastic!

I'm facing an issue in which I'm unable to get <vc-entity> components to appear if they are in a child component. I'm not sure if this is actually a bug or just my own ignorance on how to use vue-cesium - I'm happy to change the title of this issue to reflect the reality here.

I've attached a minimal Vue application which shows the problem I am trying to solve:

entity-layers.zip

You should just be able to do the usual npm install and npm run serve steps and check it out in your favourite browser.

There are only two components - App.vue which contains the main Cesium globe, and EntityLayer.vue which is the child component in this case.

Basically I've followed the example in the documentation on Entity Instance, but then modified it so that I have...

<template>
  <div class="viewer">
    <vc-viewer ref="viewer" @ready="ready">

        <entity-layer :entities="entities">

    </vc-viewer>
  </div>
</template>

...then in <entity-layer> I want to do something like...

<template>
  <div>
    <vc-entity 
      v-for "(entity,idx) in entities"
      :key="`entity-${idx}`"
      :position="cesiumPos(entity.position)"
      :billboard="cesiumBillboard(entity.icon)"
    />
  <div>
<template>

However the billboard entities never become visible.

I'm pretty sure this is because the Cesium instance is not yet ready when the <entity-layer> component is mounted, but I'm not sure how to resolve this - it feels like I somehow need to go back and re-render the component once Cesium is up. That said, it doesn't feel like it should be necessary, and if it is I'm not sure how or when to do it. Probably using the @ready event in the parent component, but...?

Anyway, I can see, using the Vue development tools inspector, that the <vc-entity> components are being added, and also seem to have the correct position.

Additionally, if I use the same position and billboard functions to add the entities with a call to...

Viewer.entities.add(…)

...they appear as expected, so I'm confident those portions of the code are working as expected. You can test this out by un-commenting line #52 in App.vue in the attached example, which will perform this "manual" addition of the entities (without using the <vc-entity> component).

This is actually kind of a workaround for now, but I'm not using the <vc-entity> component, so it's not a "solution", and of course there is no reactivity when properties change.

On that note, I should probably also mention that in the test application the coordinates of the entities are updated once per second to move them in order to test reactivity on the position data.

Anyway, any advice or solution you can provide would be much appreciated.

Keep up the great work! 😎👍

Full exception information ...not applicable...

Online example / warehouse URL https://github.com/zouyaoji/vue-cesium/files/4024716/entity-layers.zip

Recurring use cases ...not applicable...

Expected output Visible <vc-entity>s which are reactive (i.e., change position etc as underlying data changes).

Actual output <vc-entity>s are not visible

[zouyaoji]

Hi, I'm glad to receive your feedback. The problem can be reproduced. Because the vc-entity component is not considered as a sub-component during the design, currently the vue-cesium component can only be placed in a vue file. I will try to solve this problem later.

[adlaws]

Hi again - thanks for the very quick feedback and confirmation that you're able to reproduce the behaviour I'm seeing.

My Vue skills aren't that great, but if I get some time to look into this I'll let you know if I come up with any kind of solution myself - I can appreciate that projects like this can be a lot of work.

Cheers!

[zouyaoji]

I made a few changes based on your code, please refer to the attachment for details.

entities-example_zouyaojii.zip

[adlaws]

Awesome - that works great!

I really like the v-if="globe.Cesium" check, it's a very simple solution that also makes it clear what's going on there. I'm a little bit annoyed I didn't think of it myself!

Again, thanks for your time on this and the very quick turnarounds of your responses. Much appreciated!