I have developed a Vue component that needs to perform certain logic and based on that logic, I want to render the content inside the slot.
<logic-component>
<div>{{ data }}</div>
</logic-component>
The data is retrieved using a getter:
get data() { return … }
This data is obtained from a global store/service which is only available when the logic-component is fully loaded.
The component's logic is structured as follows:
<div v-if="logicIsReady"><slot></slot></div>
By default, logicIsReady is set to false, but the getter function is called beforehand.
In the Vue lifecycle, it is common for Vue to resolve current component bindings before moving on to the children components. However, in this case, the scenario is different.
Is there a way in Vue to ensure that the content inside the slot is rendered only when the v-if condition evaluates to true?
Is there any workaround or solution within Vue framework itself?
Although using v-if instead of the component does work, it is not the desired approach to achieve the desired outcome.