PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.67k stars 368 forks source link

fix: replace v-show to v-if in order to use it with all types of vue components #289

Open gavrashenko opened 4 years ago

gavrashenko commented 4 years ago

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.