Using v-show directive for hiding slots can cause some issues, for example, if you have a modal content for loader provided by vue-portal it can't be hidden just with display: none ( v-show ). In such cases it's important to use v-if directive.
This code won't work if I'll use vue-portal because portals can't be hidden via v-show and as the result - we will see a modal all the time on a screen.
<InfiniteLoading @infinite="infinite">
<template v-slot:spinner>
<VuePortalModalLoader></VuePortalModalLoader> // <--- This component will be never hidden because of v-show
</template>
</InfiniteLoading>
This issue can be fixed replacing all v-show's which are using to hide slot content to v-if directives.
Using
v-show
directive for hiding slots can cause some issues, for example, if you have a modal content for loader provided by vue-portal it can't be hidden just withdisplay: none
( v-show ). In such cases it's important to usev-if
directive.This code won't work if I'll use
vue-portal
because portals can't be hidden viav-show
and as the result - we will see a modal all the time on a screen.This issue can be fixed replacing all
v-show
's which are using to hide slot content tov-if
directives.