Vue.js、vuetify.jsアコーディオンが開かない

Question

私はカスタムコンポーネントblogを持っていて、アコーディオン（vuetify.jsから）を使って、ブログの最後のul> liに2番目のカスタムコンポーネントブログポスト。私は入れ子なしでそれを試して、それは正常に働いた。カスタムコンポーネントを入れ子にすると、最初の投稿だけを展開して閉じることができます。

ここにコードです。 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と体が正しく入力されます。

Answer 1

代わりの<template v-forblog.vue内で次のように、<li v-forを試してみてください。

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

とブログ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>