diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 43d4e2241..0d77763b0 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -99,23 +99,27 @@ export default {
const active = this.isTabActive(i);
return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
},
- childIsAccordionTab(child) {
+ isAccordionTab(child) {
return child.type.name === 'accordiontab'
}
-
},
computed: {
tabs() {
const tabs = []
this.$slots.default().forEach(child => {
- if (this.childIsAccordionTab(child)) tabs.push(child)
- else if (child.children.length > 0)
+ if (this.isAccordionTab(child)) {
+ tabs.push(child);
+ }
+ else if (child.children.length > 0) {
child.children.forEach(nestedChild => {
- if (this.childIsAccordionTab(nestedChild)) tabs.push(nestedChild)
- })
+ if (this.childIsAccordionTab(nestedChild)) {
+ tabs.push(nestedChild)
+ }
+ });
+ }
}
)
- return tabs
+ return tabs;
},
ariaId() {
return UniqueComponentId();
diff --git a/src/views/accordion/AccordionDemo.vue b/src/views/accordion/AccordionDemo.vue
index 3e4a63e06..ff745bc9d 100755
--- a/src/views/accordion/AccordionDemo.vue
+++ b/src/views/accordion/AccordionDemo.vue
@@ -105,6 +105,13 @@
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+ Dynamic Tabs
+
+
+ {{tab.content}}
+
+
@@ -118,7 +125,27 @@ import AccordionDoc from './AccordionDoc';
export default {
data() {
return {
- active: 0
+ active: 0,
+ tabs: [
+ {
+ title: 'Header I',
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ },
+ {
+ title: 'Header II',
+ content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+ },
+ {
+ title: 'Header III',
+ content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+ }
+ ]
}
},
components: {
diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index 819b8f462..635e0c31c 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -162,6 +162,34 @@ export default {
}
}
+
+
+ Dynamic Tabs
+ Tabs can be generated dynamically using the standard v-for directive.
+
+
+<Accordion>
+ <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+ <p>{{tab.content}}</p>
+ </AccordionTab>
+</Accordion>
+
+
+
+
+
+export default {
+ data() {
+ return {
+ tabs: [
+ {title: 'Title 1', content: 'Content 1'},
+ {title: 'Title 3', content: 'Content 2'},
+ {title: 'Title 3', content: 'Content 3'}
+ ]
+ }
+ }
+}
+
Properties of AccordionTab
@@ -389,6 +417,13 @@ export default {
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</AccordionTab>
</Accordion>
+
+<h5>Dynamic Tabs</h5>
+<Accordion>
+ <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+ <p>{{tab.content}}</p>
+ </AccordionTab>
+</Accordion>
@@ -397,7 +432,27 @@ export default {
export default {
data() {
return {
- active: 0
+ active: 0,
+ tabs: [
+ {
+ title: 'Header I',
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ },
+ {
+ title: 'Header II',
+ content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+ },
+ {
+ title: 'Header III',
+ content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+ }
+ ]
}
}
}