Topic: Dynamic component loading via tabs

Devinec premium asked 4 years ago


Looking for a way to use the mdb-tabs to load a component on click Below is the code I am using based on the documentation.

I was thinking of using v-bind:is="currentTabComponent" on the component to see if that tab is active then load the compoent.

Just not sure how to see if the tab is clicked for it. ie.

<SectionAdminGeneral v-bind:is="currentTabComponent"></SectionAdminGeneral>

Current code based on documentation

<mdb-tabs
:active="0"
default
:links="[
  { text: 'General Options' },
  { text: 'Section Info' }]"
:transition-duration="0.5"
transition-style="linear"  >
<template :slot="'General Options'">
  <mdb-container>
      <SectionAdminGeneral></SectionAdminGeneral>
  </mdb-container>
</template>
<template :slot="'Section Info'">
  <mdb-container>
      <SectionAdminInfo></SectionAdminInfo>
  </mdb-container>
</template>

Devinec premium answered 4 years ago


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>

Magdalena Dembna staff answered 4 years ago


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>

Devinec premium answered 4 years ago


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' }]"

Magdalena Dembna staff answered 4 years ago


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/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.0.0
  • Device: desktop
  • Browser: All
  • OS: Any
  • Provided sample code: No
  • Provided link: No