1

I'm displaying an element in my component depending on a store state value. Getting this error:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

What am I doing wrong?

Component:

<template>
  <div v-if="open">
    ...
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      open: state => state.dropdown?.open ?? false
    })
  }
}
</script>

Store:

export const state = () => ({
  open: false
})
drake035
  • 3,955
  • 41
  • 119
  • 229
  • Does this answer your question? [Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered](https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re) – kissu Nov 28 '21 at 00:32
  • Hi, did you found my linked answer relevant? – kissu Nov 28 '21 at 18:10
  • Thanks, actually it was the use of https://www.npmjs.com/package/vuex-persistedstate that was creating mismatches as I'm building the store of my app. – drake035 Nov 29 '21 at 17:30
  • @drake035 So how did you get around it? I need vuex-persistedstate, so can't exactly just get rid of it. – SeriousLee Dec 13 '22 at 05:12
  • @SeriousLee all the possible details are already given in my initial comment. You will have plenty of solution and ways to get around. – kissu Dec 13 '22 at 09:59

0 Answers0