Adding dynamic items with content reuse in Vue Tab component

11 Jun 202411 minutes to read

You can add dynamic tabs by reusing the content using Vue template. Tabs can be added dynamically by passing array of items and index value to the addTab method.

Content reuse can be achieved by using the following steps:

1. Declare a template in the template section of the “.vue” file. An empty object “data” needs to be initialized in the data option of the default export object in script section.
2. The template function needs to be assigned to the content property of the EJ2 Vue Tab Component.
3. Provide separate template function for each vue component
   and pass content by dynamically adding tab. It will reuse the content of vue component.

Refer to the following sample.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <button id="add" class="e-btn" v-on:click="addButtonClicked">Click to add</button>
    <button id="remove" class="e-btn" v-on:click="removeButtonClicked">Click to remove</button>
    <ejs-tab id="tabElement" ref=tabObj>
      <e-tabitems>
        <e-tabitem :header='DatePickerHeaderText' :content='DatePickerTemplate'></e-tabitem>
        <e-tabitem :header='DropdownHeaderText' :content='DropDownTemplate'></e-tabitem>
        <e-tabitem :header='ReusedDropdownHeaderText' :content='DropDownTemplate'></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  </div>
</template>
<script setup>

import { TabComponent as EjsTab, TabItemsDirective as ETabitems, TabItemDirective as ETabitem } from '@syncfusion/ej2-vue-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { createApp } from 'vue';

const DatePickerHeaderText = { text: "DatePicker" };
const DropdownHeaderText = { text: "Dropdown" };
const ReusedDropdownHeaderText = { text: "Reused Dropdown" };
const DatePickerTemplate = () => {
  return {
    template: createApp().component("DatePickerComponent", {
      components: {
        "ejs-datepicker": DatePickerComponent,
      },
      template:
        "<div><h1> Content</h1><br /><ejs-datepicker></ejs-datepicker></div>",
      data() {
        return {
          target: document.querySelector(
            ".e-toolbar-item.e-active .e-tab-text"
          ).innerHTML,
        };
      },
    }),
  };
};
const DropDownTemplate = () => {
  return {
    template: createApp().component("DropDownListComponent", {
      components: {
        "ejs-dropdownlist": DropDownListComponent
      },
      template:
        "<div><h1> Content</h1><br /><ejs-dropdownlist height='200px' :dataSource='sportsData' placeholder='Select a game'></ejs-dropdownlist></div>",
      data() {
        return {
          sportsData: [
            "Badminton",
            "Basketball",
            "Cricket",
            "Golf",
            "Hockey",
            "Rugby",
          ],
          target: document.querySelector(
            ".e-toolbar-item.e-active .e-tab-text"
          ).innerHTML,
        };
      },
    }),
  };
};

const addButtonClicked = () => {
  var tabObj = this.$refs.tabObj.ej2Instances;
  let newTabItem = {
    header: { text: "DynamicTabItem" },
    content: this.DropDownTemplate,
  };
  tabObj.addTab([newTabItem], 1);
};
const removeButtonClicked = () => {
  var tabObj = this.$refs.tabObj.ej2Instances;
  tabObj.removeTab(1);
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <button id="add" class="e-btn" v-on:click="addButtonClicked">Click to add</button>
    <button id="remove" class="e-btn" v-on:click="removeButtonClicked">Click to remove</button>
    <ejs-tab id="tabElement" ref=tabObj>
      <e-tabitems>
        <e-tabitem :header='DatePickerHeaderText' :content='DatePickerTemplate'></e-tabitem>
        <e-tabitem :header='DropdownHeaderText' :content='DropDownTemplate'></e-tabitem>
        <e-tabitem :header='ReusedDropdownHeaderText' :content='DropDownTemplate'></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  </div>
</template>
<script>

import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-vue-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { createApp } from 'vue';

export default {
  name: "App",
  components: {
    "ejs-tab": TabComponent,
    "e-tabitems": TabItemsDirective,
    "e-tabitem": TabItemDirective
  },
  data: function () {
    return {
      DatePickerHeaderText: { text: "DatePicker" },
      DropdownHeaderText: { text: "Dropdown" },
      ReusedDropdownHeaderText: { text: "Reused Dropdown" },
      DatePickerTemplate: function () {
        return {
          template: createApp().component("DatePickerComponent", {
            components: {
              "ejs-datepicker": DatePickerComponent,
            },
            template:
              "<div><h1> Content</h1><br /><ejs-datepicker></ejs-datepicker></div>",
            data() {
              return {
                target: document.querySelector(
                  ".e-toolbar-item.e-active .e-tab-text"
                ).innerHTML,
              };
            },
          }),
        };
      },
      DropDownTemplate: function () {
        return {
          template: createApp().component("DropDownListComponent", {
            components: {
              "ejs-dropdownlist": DropDownListComponent,
            },
            template:
              "<div><h1> Content</h1><br /><ejs-dropdownlist height='200px' :dataSource='sportsData' placeholder='Select a game'></ejs-dropdownlist></div>",
            data() {
              return {
                sportsData: [
                  "Badminton",
                  "Basketball",
                  "Cricket",
                  "Golf",
                  "Hockey",
                  "Rugby",
                ],
                target: document.querySelector(
                  ".e-toolbar-item.e-active .e-tab-text"
                ).innerHTML,
              };
            },
          }),
        };
      },
    };
  },
  methods: {
    addButtonClicked: function () {
      var tabObj = this.$refs.tabObj.ej2Instances;
      let newTabItem = {
        header: { text: "DynamicTabItem" },
        content: this.DropDownTemplate,
      };
      tabObj.addTab([newTabItem], 1);
    },
    removeButtonClicked: function () {
      var tabObj = this.$refs.tabObj.ej2Instances;
      tabObj.removeTab(1);
    },
  },
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>