Hello, I am working on a nuxt/vue app and I keep getting this error message in the console… 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 ’ +
'
, or missing . Bailing hydration and performing ’ +
‘full client-side render.’…
I’ve been trying to debug the issue in the console, but find it extremely difficult. I have narrowed down my issue being the gmap code I am using for my maps…code here:
<GmapMap
:center="{lat:34.164900, lng:-118.374825}"
:zoom="16"
:options="options"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
I honelty don’t see anything wrong with my code and where it is placed… any thoughs on how to read and debug the error messages so I can get rid of this error message?
