Question

我有一个 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和+” {{1} }。最后，我尝试添加react：true语句，因为我在控制台中收到有关反应性的消息，但没有任何效果。

accordionItems.accId

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

用 Vue 检查时，我看到ID显示为“ {<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>”，所以我知道我缺少了一些东西。我希望单击该问题并将其扩展以显示答案。

Answer 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表达式。

Bootstrap Vue手风琴未使用数组中的ID进行扩展

1 个答案: