I am currently using my app.js to dynamically generate tabs like the code snippet below:
Input:
<tabs>
<div>
<a slot="header">Tab 1</a>
<article slot="content">
<h2>Tab 1 Content</h2>
<p>Lorem ipsum dolor sit amet</p>
</article>
</div>
<div>
<a slot="header">Tab 2</a>
<article slot="content">
<h2>Tab 2 Content</h2>
<p>Sed ut perspiciatis unde</p>
</article>
</div>
<div>
<a slot="header">Tab 3</a>
<article slot="content">
<h2>Tab 3 Content</h2>
<p>Neque porro quisquam est</p>
</article>
</div>
</tabs>
For each div, there is one tab where the header slot represents the title of the tab and the content slot contains the tab content.
The challenge is to transform the input above into the following output:
Output:
<section class="tabs">
<nav class="tabs-nav">
<ul class="tabs-list">
<li class="tabs-listitem">
<a class="tabs-trigger">Tab 1</a>
</li>
<li class="tabs-listitem">
<a class="tabs-trigger">Tab 2</a>
</li>
<li class="tabs-listitem">
<a class="tabs-trigger">Tab 3</a>
</li>
</ul>
</nav>
<div class="tabs-body">
<article>
<h2>Tab 1 Content</h2>
<p>Lorem ipsum dolor sit amet</p>
</article>
<article>
<h2>Tab 2 Content</h2>
<p>Sed ut perspiciatis unde</p>
</article>
<article>
<h2>Tab 3 Content</h2>
<p>Lorem ipsum dolor sit amet</p>
</article>
</div>
</section>
To achieve this transformation in my render function or Vue template, I need assistance on iterating through slots using this.$slots.header without getting undefined values.
If you have any insights or suggestions on how to approach this problem, it would be greatly appreciated. Thank you!