问题描述
我有 VueJs 应用程序包含带有动态数据的手风琴,但他的按钮不会在手风琴之间切换:
<div class="accordion" id="accordionExample">
<div class="text-right" v-for="section in lessions" :key="section.section_name">
<div class="card">
<div class="card-header" :id="section.section_name">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" :data-target="`#${section.section_name+100}`" :aria-expanded="section.section_name==1?'true':'false'" aria-controls="section.section_name+100">
Collapsible Group Item #{{section.section_name}}
</button>
</h2>
</div>
<div :id="section.section_name+100" :class="section.section_name==1?`collapse show` :`collapse`" :aria-labelledby="section.section_name" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit,</div>
</div>
</div>
</div>
</div>
我的错误在哪里?
解决方法
我发现了我的错误,我只是将“折叠”字符串添加到所有 id 和目标数据中并已解决:
<div class="accordion" id="accordionExample">
<div class="text-right" v-for="section in lessions" :key="section.section_name">
<div class="card">
<div class="card-header" :id="`collapse`+section.section_name">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" :data-target="`#collapse${section.section_name+100}`" :aria-expanded="section.section_name==1?'true':'false'" :aria-controls="`collapse${section.section_name+100}`">
Collapsible Group Item #{{section.section_name}}
</button>
</h2>
</div>
<div :id="`collapse${section.section_name+100}`" :class="section.section_name==1?`collapse show` :`collapse`" :aria-labelledby="`collapse`+section.section_name" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit,</div>
</div>
</div>
</div>
</div>