VueJs:动态折叠(手风琴)

Question

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

我的错在哪里？

Answer 1

我发现了我的错误，我只是添加了"塌陷"；字符串到所有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>