Vue.js、vuetify.js手风琴不打开

我有一个自定义组件

blog

，我用一个手风琴（来自vuetify.js）显示博客中的帖子（在ul>li结尾），使用第二个自定义组件博客帖子。我在没有筑巢的情况下试过，效果很好。有了自定义组件的嵌套，我只能展开和关闭第一篇文章

这是代码。

blog.vue

的模板：

<template>
  <v-content class="blog">
    <v-container fluid>
      <v-row>
        <v-col xs3="xs3"></v-col>
        <v-col xs6="xs6">
          <h5>Blog</h5>

          <div class="loading" v-if="loading">
            Loading...
          </div>

          <div v-if="error" class="error">
            {{ error }}
          </div>

          <div v-if="posts" class="content">
            <v-collapsible>
              <template v-for="post in posts" >
                <blog-post :post="post"></blog-post>
              </template>
            </v-collapsible>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</template>

<template>
  <li class="blog-post">
    <v-collapsible-header>{{ post.title }}</v-collapsible-header>
    <v-collapsible-body>
      <v-card>
        <v-card-text class="grey lighten-3">{{ post.body }}</v-card-text>
      </v-card>
    </v-collapsible-body>
  </li>
</template>

---

手风琴的Heders和body填充正确。

我没有使用

而是尝试了这个变体，我得到了一个错误：
模板语法错误组件模板应该只包含一个根元素：
@LiPo Does将所有内容放在
blog post.vue中的div中，有可能创造一把小提琴吗？它也不起作用。我想我会在所有帖子中保留一个组件
      <div v-if="posts" class="content">
        <v-collapsible>
          <li v-for="post in posts" >
            <blog-post :post="post"></blog-post>
          </li>
        </v-collapsible>
      </div>

<template class="blog-post">
    <v-collapsible-header>{{ post.title }}</v-collapsible-header>
    <v-collapsible-body>
      <v-card>
        <v-card-text class="grey lighten-3">{{ post.body }}</v-card-text>
      </v-card>
    </v-collapsible-body>
</template>