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

Question

我有一个自定义组件 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>

还有blog-post.vue的模板：

<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 填充正确。

Answer 1

而不是 <template v-for 尝试 <li v-for，就像在 blog.vue 中进行以下操作：

      <div v-if="posts" class="content">
        <v-collapsible>
          <li v-for="post in posts" >
            <blog-post :post="post"></blog-post>
          </li>
        </v-collapsible>
      </div>

在 blog-post.vue 的模板中：

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