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,869
  • 33
  • 97
  • 193
  • 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

0 Answers0