Bootstrap Vue 手风琴不使用数组中的 id 进行扩展

Question

我有一个 Bootstrap-Vue accordion 的数组，其中包含一个 id。该按钮与我的文本一起出现，但不会在单击时展开。总的来说，我对编码还很陌生，这是我使用 Vue 的第一周，对它来说非常陌生。

我试过创建“accordion-1”、“accordion-2”等的 id，并提供 v-b-toggle 和折叠 ID“[=19=” ]”。我也试过让 accId 是一个数字（1、2 等），并将 v-b-toggle 和 collapse ids 作为“'accordion1' + accId”以及 +item.id 和 +“[=19=”提供]。最后，我尝试添加 reactive: true 语句，因为我在控制台中收到有关反应性的消息，但没有任何效果。

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

当我使用 Vue 检查时，我可以看到 id 显示为“'accordion-' + accordionItems.accId”，所以我知道我遗漏了一些东西。我希望点击问题并展开以显示答案。

Answer 1

您需要"bind" 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>

注意 id= 之前的 :。这指示 Vue 引号中的值是一个 javascript 表达式。

id="'accordion-' + accordionItems.accId" 发生的事情是 Vue 将双引号之间的值视为字符串文字，而不是 JavaScript 表达式。

Bootstrap Vue 手风琴不使用数组中的 id 进行扩展

Bootstrap Vue accordion not expanding with id from array

accordion

vue.js

bootstrap-vue