Bootstrap Vue accordion not expanding with id from array

Question

I have an array for a Bootstrap-Vue accordion that includes an id. The button appears with my text but will not expand on clicking. I'm fairly new to coding in general and this is my first week using Vue so super-new to it.

I've tried creating an id of "accordion-1", "accordion-2" etc. and feeding the v-b-toggle and collapse id "accordionItems.accId". I've also tried having the accId be a number (1, 2, etc.) and feeding the v-b-toggle and collapse ids as "'accordion1' + accId" and also +item.id and +"accordionItems.accId. Lastly I tried adding the reactive: true statement because I'm getting the message about reactivity in the Console but nothing works.

  <b-card no-body class="mb-1" v-for="item in accordionItems" :key="item.accId">
    <b-card-header header-tag="header" class="p-1" role="tab">
      <b-button block v-b-toggle="'accordion-' + accordionItems.accId" variant="primary"> {{ item.button }}
      </b-button>
    </b-card-header>
    <b-collapse id="'accordion-' + accordionItems.accId" accordion="my-accordion" role="tabpanel">
      <b-card-body>
        <b-card-text>{{ item.text }}</b-card-text>
      </b-card-body>
    </b-collapse>
  </b-card>

<script>
export default {
  name: "Accordion",
  data() {
    return { reactive: true,
      accordionItems: [
        {
          accId: 1,
          button: `Who played Burt and Heather Gummer in Tremors?`,
          text: `Answer: Burt: Michael Gross, Heather: Reba McEntire`
        },

        {
          accId: 2,
          button: `In "The Bachelor and the Bobby-Soxer" (1947), what line does Dick Nugent (Cary Grant) use to convince Susan Turner (Shirley Temple) he's no more mature than boys her own age?`,
          text: `Answer: "Mellow greetings, yookie dookie!"`
        }
      ],
    }
  }
}
</script>

When I inspect with Vue, I can see the id is showing as "'accordion-' + accordionItems.accId" so I know I'm missing something. I'm expecting to click on the question and have it expand to show the answer.

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-08-14T16:01:16

You need to "bind" to ID:

    <b-collapse :id="'accordion-' + accordionItems.accId" accordion="my-accordion" role="tabpanel">
      <b-card-body>
        <b-card-text>{{ item.text }}</b-card-text>
      </b-card-body>
    </b-collapse>

Note the : before id=. This instructs Vue that the value in the quotes is a javascript expression.

What was happening with id="'accordion-' + accordionItems.accId" is that Vue sees the value between the double quotes as a string literal, not a JavaScript Expression.

Bootstrap Vue accordion not expanding with id from array

1 Answers