This is probably a dumb question... sorry! I’ve been really wanting to use this for a while but on a couple of projects now I just get stumped at the classic mismatching nodes warning...
Mismatching childNodes vs. VNodes: NodeList(11) [comment, text, div.header, text, blockcontent, text, div.section-images.margin-bottom-double.clickable, text, div.section-text, text, comment] (11) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode]
vue.common.dev.js?4650:630 [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.
I’m sure I must be, but don’t think I’m doing anything untoward – just a standard async fetch where I check if my Vuex store is already populated, and if not, dispatch an API call from an action in the store.
Sections is simply returned as a computed property:
homepage() {
return this.$store.state.homepage
}
The issue stops if I comment out the BlockContent component, so I really don’t think I’m doing anything strange here – but would hugely appreciate any thoughts!
Hi Rupert,
This is probably a dumb question... sorry! I’ve been really wanting to use this for a while but on a couple of projects now I just get stumped at the classic mismatching nodes warning...
I’m sure I must be, but don’t think I’m doing anything untoward – just a standard async fetch where I check if my Vuex store is already populated, and if not, dispatch an API call from an action in the store.
In my pages I am just doing the following:
Sections is simply returned as a computed property:
The issue stops if I comment out the BlockContent component, so I really don’t think I’m doing anything strange here – but would hugely appreciate any thoughts!