vue-infinite-loading
vue-infinite-loading copied to clipboard
fix: replace v-show to v-if in order to use it with all types of vue components
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.