Home

I am trying to create a faq page on nuxt js.
The template below which I got from veautify does not show up on my localhost. I get these errors instead. It works if I replace v-for “(item,i) in 5” : key=“i” as shown in the template source code but I want to pass a list of questions from object(listquestions)into the array from MapState.

[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

, or missing

. Bailing hydration and performing full client-side render.
v-toolbar-logo> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

found in

—> at layouts/default.vue

faq.vue file

<template>
    <v-expansion-panel>
        <v-expansion-panel-content v-for="quest in listquestions" :key="quest.id">
            <div slot="header"> Question </div>
            <v-card>
                <v-card-text class ="grey lighten-3">
                    This is a test answer.
                </v-card-text>
            </v-card>
        </v-expansion-panel-content>
    </v-expansion-panel>
</template>

<style>

</style>
<script>

import {mapState, mapGetters, mapActions} from 'vuex'

export default {
  computed: mapState({
      listquestions:'allQuestions'
      })
}
</script>`

**questions.js file**
export const state = () => ({
    list :['Question 1','Question 2','Question 3','Question 4','Question 5'],
    allQuestions: state => state.list 
       
})

Accordian template source code which I got from veautify.

https://vuetifyjs.com/components/expansion-panels#example-1