I have a Loader component which accepts the contents that should be rendered when its loading property is false in it’s default slot. When the loading property is true it renders a default loading animation, which can also optionally be overridden by a named slot. I am using this when fetching data from an API, and was hoping to circumvent the need for a … by using the following setup in the Loader component:
<template> <div> <slot name="loader" v-if="isLoading"> <ContentLoader /> </slot> <slot v-else></slot> </div> </template>
However, the default slot contents seem to be already evaluated in the parent component even if isLoading is true, whilst in that case the slot isn’t even defined in the Loader component. This causes errors because the default slot contents I want to render depend on the data being fetched an available. So instead of being able to do this in the parent:
<template> <Loader :loading="isLoading"> .... </Loader> </template>
I now still have to do this:
<template> <Loader :loading="isLoading"> <template v-if="!isLoading"> ... </template> </Loader> </template>
Is there any way to circumvent the need for the extra, redundant ?