1

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

我已经尝试创建一个id“ accordion-1”、“ accordion-2”等并提供v-b-toggle和折叠 ID“ accordionItems.accId”。我还尝试让 accId 为数字（1、2 等）并将 vb-toggle 和折叠 ID 提供为 " 'accordion1' + accId"+item.id和 +" accordionItems.accId。最后我尝试添加 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”，所以我知道我遗漏了一些东西。我希望单击该问题并将其展开以显示答案。

4

1 回答 1

1

您需要“绑定”到 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 表达式。

于 2019-08-14T16:01:16.973 回答