Dynamic component loading via tabs

You can use @activeTab method which emits the current tab's index. You can find the list of all properties and methods here, in the API tab: https://mdbootstrap.com/docs/vue/components/tabs/

Thank you for that. That helped

Is there a quick way to get the active link text as well

:links="[
  { text: 'General Options' },
  { text: 'Section Info' },
  { text: 'Access Control' },
  { text: 'Moderation' },
  { text: 'Menus' },
  { text: 'Widgets' },
  { text: 'Delegates' }]"

Try to bind :links to a field in data. Once you have that, in the handler for @activeTab set another field - f.e. active and bind an active index to it. Thank you can create a computed property which will return an active link. Example below:

<template>
  <mdb-tabs :active="0" default :links="links" :transition-duration="0.5" transition-style="linear" @activeTab="handleTabChange">
    <template :slot="'General Options'"></template>
    <template :slot="'Section Info'"></template>
  </mdb-tabs>

</template>

<script>
import { mdbTabs } from "mdbvue";
export default {
  name: "InputsProPage",
  components: {
    mdbTabs
  },
  data() {
    return {
      active: 0,
      links: [{ text: "General Options" }, { text: "Section Info" }]
    };
  },
  computed: {
    activeLink() {
      return this.links[this.active].text;
    }
  },
  methods: {
    handleTabChange(e) {
      this.active = e;
    }
  },
};
</script>

Awesome Thanks

Here is full basic code That will use Data value for the tabs and load dynamic slot and component based on what Tab is active

Hope it helps others as well

<template>
  <div>
<PageLoader v-if="$store.state.loading" />
<h1>Section Options Page</h1>
<mdb-tabs
  @activeTab="getActiveTabIndex"
  :active="0"
  default
  :links="tabs" 
  :transition-duration="0.5"
  transition-style="linear"
  >
  <template :slot="[activeLink]"> <!-- Set the Slot dynamically based on what tab is selected -->
    <component v-bind:is="TabComponent"></component > <!-- Pull the proper component if it is the active tab -->
  </template>
</mdb-tabs>
  </div>
</template>

<script>
import { mdbContainer, mdbCol, mdbRow, mdbIcon, mdbTabs, mdbJumbotron, mdbView, mdbMask, mdbBtn, mdbTextarea, mdbInput } from 'mdbvue'
import PageLoader from '~/components/body/shared/PageLoader.vue'

export default {
  layout: 'dashboard',
  name: 'InsideOPS Dashboard',
  components: {
    mdbContainer,
    mdbCol,
    mdbRow,
    mdbIcon,
    mdbTabs,
    mdbJumbotron,
    mdbView,
    mdbMask,
    mdbBtn,
    mdbTextarea,
    mdbInput,
    PageLoader,
    'TabGeneralOptions': () => import('~/components/dashboard/sectionadmin/General.vue'),
    'TabSectionInfo': () => import('~/components/dashboard/sectionadmin/SectionInfo.vue'),
    'TabAccessControl': () => import('~/components/dashboard/sectionadmin/AccessControl.vue'),
    'TabModeration': () => import('~/components/dashboard/sectionadmin/Moderation.vue'),
    'TabMenus': () => import('~/components/dashboard/sectionadmin/Menus.vue'),
    'TabWidgets': () => import('~/components/dashboard/sectionadmin/Widgets.vue'),
    'TabDelegates': () => import('~/components/dashboard/sectionadmin/Delegates.vue')
    },

  data () {
    return {
      active: 0,// Set default tab
      tabs: [{ text: 'General Options' }, 
        { text: 'Section Info' }, 
        { text: 'Access Control' }, 
        { text: 'Moderation' }, 
        { text: 'Menus' }, 
        { text: 'Widgets' }, 
        { text: 'Delegates' }]
    }
  },

  computed: {
    activeLink() {
      return this.tabs[this.active].text
    },
    TabComponent: function () {
      return 'Tab' + this.tabs[this.active].text.replace(/ /g, '')
    }
  },

  methods: {
    getActiveTabIndex(e) {
      this.active = e
    }
  }
}
</script>