My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source code, it works, but I'd like to pass a list of questions from an object called 'listquestions' into the array using 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 nestling block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
v-toolbar-logo - have you registered the component correctly? For recursive components, ensure to provide the "name" option.
found in
---> <Default> at layouts/default.vue
<Root>
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
})
Accordion template source code which I got from Vuetify.