vue.js - VueJs: dynamic collapsed (accordion)

Question

I have VueJs App contain accordion with dynamic data but he buttons don't switch between accordions :

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

where is my mistake?

Answer 1

I found my mistake ,I just add "collapse" string to all id and target data and has been solved :

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