Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR not working #343

Closed
abeltodev opened this issue Feb 3, 2020 · 0 comments
Closed

SSR not working #343

abeltodev opened this issue Feb 3, 2020 · 0 comments

Comments

@abeltodev
Copy link

abeltodev commented Feb 3, 2020

When I add the prerender property to the RecycleScroller I get these errors:

Parent: <div class="vue-recycle-scroller__item-wrapper" style="min-height:nullpx;">
Mismatching childNodes vs. VNodes:  
NodeList(20) [ div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view, div.vue-recycle-scroller__item-view
, … ]
 
Array []
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Here is my code simplified

<script>

    export default {

        computed: {
            items() {
                return this.$store.state.items
            }
        },

        preFetch ({store}) {
            return Promise.all([
                store.dispatch('load')
            ])
        },

        mounted() {
            this.$store.dispatch('load')
        }
    };

</script>
<RecycleScroller
                    class="scroller"
                    :items="items"
                    :item-size="32"
                    key-field="id"
                    v-slot="{ item }"
                    :prerender="20"
                >
                    <div class="user">
                        {{ item.id }}
                    </div>
                </RecycleScroller>

Am I doing something wrong? I spent 2 days in it, but I'm unable to find a solution ...

@Akryum Akryum closed this as completed in 2ab6d6a Apr 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant