Vue.js，vuetify.js手风琴不开
Vue.js，vuetify.js手风琴不开
提问于 2017-01-18 21:22:08
我有一个自定义组件blog，使用手风琴(来自vuetify.js)，我使用第二个定制组件blog-post显示博客中的帖子(在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>手风琴的扶手和阀体被正确地填充。
回答 1
Stack Overflow用户
发布于 2017-01-19 03:15:24
而不是<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>在博客模板中-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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41729672
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号