Я хочу создать динамический контент внутри кнопки сворачивания / элемента / выпадающего списка. Так как я буду часто использовать его в других компонентах. Итак, как я могу передать компоненты внутри Collapse? Например, в Collapse есть некоторый DataTable, где я могу нажать кнопку "+", и появится другой collapse (я уже сделал это), и есть другое содержимое, и я хочу использовать эти collaps-ы, и внутри него будет не таблица, а, например, форма. Я хочу оптимизировать его и использовать для будущих сворачиваний с другим контентом.
Использую Vue JS 2, Bootstrap Vue (писал изначально на английском быстро перевел)
Как можно оптимизировать их?
Вот мой CollapseSection.vue
<template>
<div class="accordion" role="tablist">
<b-button block v-b-toggle.accordion-1 class="collapse-btn" align-h="between">
{{ selectText }}
<b-icon :icon="visible ? 'caret-down' : 'caret-up'" class="icon"></b-icon>
</b-button>
<b-card no-body class="mb-1">
<b-collapse id="accordion-1" v-model="visible" accordion="my-accordion" role="tabpanel">
<b-card-body>
<DataTable :labels="labels" :data="data" :showAdd="true" @add-item="addItem"/>
</b-card-body>
</b-collapse>
</b-card>
//below is dynamic collapse when Click on "+" button
<div v-for="(item, index) in items" :key="index">
<b-button block v-b-toggle="'accordion-' + (index + 2)" class="collapse-btn">
{{ item.name }}
<b-icon :icon="visible ? 'caret-down' : 'caret-up'" class="icon"></b-icon>
</b-button>
<b-card no-body class="mb-1">
<b-collapse :id="'accordion-' + (index + 2)" accordion="my-accordion" role="tabpanel">
<b-card-body>
some content
</b-card-body>
</b-collapse>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: "CollapseButton",
components: {DataTable},
props: {
selectText: {
type: String,
default: () => "Select",
},
},
data() {
return {
items: [],
visible: false,
}
},
}
</script>
NewForm.vue //is just an example when I call/use it collapse component(only template, cuz script is
<template>
<CollapseSection select-text="Collapse ">
</CollapseSection>
</template>
<script>
export default {
name: "NewForm",
components: {CollapseSection},
}
</script>