Как сделать вертикальный скролл в аккордеоне для компонента b-collapse от bootstrap-vue?

Для добавления вертикального скролла в аккордеоне с использованием компонента b-collapse от bootstrap-vue, нужно выполнить следующие шаги:

1. Установите bootstrap-vue, если он еще не установлен. Вы можете установить его с помощью npm или yarn, выполнив команду:

   npm install bootstrap-vue

2. Импортируйте компонент b-collapse в ваш компонент Vue:

   import { BCollapse } from 'bootstrap-vue'

3. Создайте базовый макет вашего аккордеона. Для этого создайте массив объектов, где каждый объект будет представлять отдельный элемент аккордеона. Объект должен содержать заголовок и содержимое.

   data() {
     return {
       items: [
         { title: 'Заголовок 1', content: 'Содержимое 1' },
         { title: 'Заголовок 2', content: 'Содержимое 2' },
         { title: 'Заголовок 3', content: 'Содержимое 3' },
         // добавьте другие элементы по мере необходимости
       ]
     }
   }

4. Используйте компонент b-collapse в цикле v-for, чтобы создать элементы аккордеона:

   <b-card no-body>
     <b-card-header header-tag="header" class="p-1">
       <h5 class="mb-0">Аккордеон</h5>
     </b-card-header>
     <b-collapse accordion="my-accordion">
       <b-card-body>
         <b-card-text>
           <b-card no-body v-for="(item, index) in items" :key="index">
             <b-card-header header-tag="header" class="p-1" role="tab" :id="`heading-${index}`">
               <b-button block variant="link" v-b-toggle={`collapse-${index}`} :aria-controls={`collapse-${index}`}>
                 {{ item.title }}
               </b-button>
             </b-card-header>
             <b-collapse :id="`collapse-${index}`" :aria-labelledby="`heading-${index}`">
               <b-card-body>
                 {{ item.content }}
               </b-card-body>
             </b-collapse>
           </b-card>
         </b-card-text>
       </b-card-body>
     </b-collapse>
   </b-card>

5. Чтобы добавить вертикальный скролл, примените стили к родительскому элементу b-card-body. Добавьте прокрутку при достижении определенной высоты с помощью свойство overflow-y: auto:

   .b-card-body {
     max-height: 300px; /* Задайте высоту, на которой вы хотите показывать прокрутку */
     overflow-y: auto;
   }

Теперь у вас должен быть аккордеон с вертикальной прокруткой для компонента b-collapse от bootstrap-vue. Когда пользователь открывает элемент, содержимое будет отображаться внутри контейнера с возможностью прокрутки, если он не помещается в заданную высоту.