Add demo for dynamic tabs

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)
+                    if (this.isAccordionTab(child)) {
-                    else if (child.children.length > 0)
+                        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();

src/views/accordion/AccordionDemo.vue

@@ -105,6 +105,13 @@
                             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>
             </div>
         </div>
 
@@ -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: {

src/views/accordion/AccordionDoc.vue

@@ -162,6 +162,34 @@ export default {
 	}
 }
 
+</code></pre>
+
+				<h5>Dynamic Tabs</h5>
+				<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Accordion&gt;
+	&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
+		&lt;p&gt;{{tab.content}}&lt;/p&gt;
+	&lt;/AccordionTab&gt;
+&lt;/Accordion&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+	data() {
+		return {
+			tabs: [
+				{title: 'Title 1', content: 'Content 1'},
+				{title: 'Title 3', content: 'Content 2'},
+				{title: 'Title 3', content: 'Content 3'}
+			]
+		}
+	}
+}
+
 </code></pre>
 
 				<h5>Properties of AccordionTab</h5>
@@ -389,6 +417,13 @@ export default {
 			Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
 	&lt;/AccordionTab&gt;
 &lt;/Accordion&gt;
+
+&lt;h5&gt;Dynamic Tabs&lt;/h5&gt;
+&lt;Accordion&gt;
+	&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
+		&lt;p&gt;{{tab.content}}&lt;/p&gt;
+	&lt;/AccordionTab&gt;
+&lt;/Accordion&gt;
 </template>
 </code></pre>
 
@@ -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.`
+                }
+            ]
         }
     }
 }