Question

我正在尝试在nuxt js上创建一个faq页面。我从veautify获得的模板没有显示在我的localhost上。我反而得到了这些错误。它可以工作，如果我替换v中的“（item，i）in 5”：key =“i”，如模板源代码所示，但我想将一个问题列表从对象（listquestions）传递到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 <p>, or missing <tbody>. 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

---> <Default> at layouts/default.vue
       <Root>

faq.vue文件

<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档案

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 ```

Answer 1

您的问题似乎不是由您粘贴的代码引起的，通过阅读错误，是由 v-toolbar-logo 引起的，您是否可以创建一个jsfiddle？

由于在nuxt js上的v-for循环，因为veutify上的Accordian模板没有显示出来

1 个答案: