VueJs：动态折叠手风琴

如何解决VueJs：动态折叠手风琴

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