Dynamic component loading via tabs


Topic: Dynamic component loading via tabs

Devinec premium asked 3 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>

Magdalena Dembna staff premium answered 3 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/


Devinec premium answered 3 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 premium answered 3 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 3 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>

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
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.0.0
  • Device: desktop
  • Browser: All
  • OS: Any
  • Provided sample code: No
  • Provided link: No