Разметка Vue <template>не работает должным образом при переборе списка

Question

У меня есть app.js для генерации вкладок, как показано ниже:

Ввод:

<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>

Каждый div выше указывает одну tab.header слот является заголовком панели вкладок, а слот контента является содержимым вкладки для соответствующей вкладки.

С указанным выше входным сигналом для моего tabs компонента я должен сгенерировать следующий вывод:

Вывод:

<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>

С помощью вышеуказанного ввода в Tabs, как я могу получить вывод, как указано выше, в моей функции рендеринга или шаблоне Vue.

Если я попытаюсь выполнить итерации по слотам с помощью this.$slots.header Я получаю undefined

Может кто-нибудь помочь мне в достижении этого

Answer 1

Свойство $slots содержит слоты, которые являются непосредственными дочерними элементами , поэтому вложенные именованные слоты (как у вас в вашем примере) будут исключены.В вашем случае у вас будет только слот default, содержащий оболочку div s (т. Е. Вкладки).В функции render вам придется вручную обрабатывать дочерние элементы вкладки, чтобы получить внутренние слоты, чтобы сгенерировать описанный вами HTML-код:

render(h) {
  const tabs = this.$slots.default;
  const headers = tabs && tabs.map(tab => tab.children.filter(x => x.data.attrs['slot'] === 'header'));
  const bodies = tabs && tabs.map(tab => tab.children.filter(x => x.data.attrs['slot'] === 'content'));

  if (!tabs || !bodies) {
    return h('div', 'No tabs');
  }

  return h('section', [
    h('nav', { class: 'tabs-nav' }, [
      h('ul', { class: 'tabs-list' },
        headers.map(header => h('li', { class: 'tabs-listitem' }, header)))
    ]),
    h('div', { class: 'tabs-body' }, bodies)
  ]);
}

demo

Answer 2

Это основной цикл в Vue.Надеюсь, это поможет

Vue.component('tabs', {
  props: ['tabs'],
  template: `
  <section class="tabs">
      <nav class="tabs-nav">
          <ul class="tabs-list">
              <li v-for="item in tabs" :key="item" class="tabs-listitem">
                  <a class="tabs-trigger">{{item.title}}</a>
              </li>
          </ul>
      </nav>
      <div class="tabs-body">
          <article v-for="item in tabs" v-html="item.content" :key="item"></article>
      </div>
  </section>`
})

var app = new Vue({
  el: '#app',
  data () {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: '<h1>Tab 1 Content</h1>'
        },
        {
          title: 'Tab 2',
          content: '<h1>Tab 2 Content</h1>'
        },
        {
          title: 'Tab 3',
          content: '<h1>Tab 3 Content</h1>'
        }
      ]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <tabs :tabs="tabs"></tabs>
</div>