q-tab-panels with dynamic component content

[CWoodman]

I’m trying to build a tabbed interface with tab panels dynamically populated with components. Currently just plugging in components as canned data, but eventually hope to get them from the store.

But it’s not working - I see the tabs, but no content and no error messages. Here’s the code:

<template>
  <div>
    <q-tabs v-model="selectedTab">
      <q-tab v-for="tab in tabs" :key="tab.name"
      :label="tab.name"
      :name="tabe.name"
      />
    </q-tabs>

    <q-tab-panels keep-alive v-model="selectedTab">
      <q-tab-panel
        v-for="tab in tabs" :key="tab.name" :name="tab.name"
>
        <component :is="tab.componentName"></component>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script>
import Icons from 'components/workPanels/Icons'
import WorkIntro from 'components/workPanels/WorkIntro'
import SupplySummary from 'components/workPanels/SupplySummary'
import SupplyDetails from 'components/workPanels/SupplyDetails'

export default {
  components: {
    Icons,
    WorkIntro,
    SupplySummary,
    SupplyDetails
  },
  data () {
    return {
      selectedTab: 'Icons',
      tabs: [
        {
          name: 'Icons',
          componentName: 'Icons'
        },
        {
          name: 'Introduction',
          componentName: 'WorkIntro'
        },
        {
          name: 'Summary',
          componentName: 'SupplySummary'
        },
        {
          name: 'Details',
          componentName: 'SupplyDetails'
        }
      ]
    }
  }
}
</script>

Any suggestions?

[CWoodman]

just solved my own problem - forgot to set :name=tab.name in both the q-tab and q-tab-panel. Changed the code to correct it.