How to load tab with DataSource in Vue Tabs

02 Sep 20264 minutes to read

You can bind any data object to Tab items by mapping it to the header and content properties.

To render the Vue Tab component with a data source, you can check out this video:

In the following demo, data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to the items property of the Tab.

<template>
  <div id="app">
  <ejs-tab ref="TabInstance">

  </ejs-tab>
</div>
</template>
<script setup>

import { TabComponent as EjsTab} from '@syncfusion/ej2-vue-navigations';
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { onMounted, ref } from 'vue';

const TabInstance=ref(null);
onMounted(() => {  
new DataManager({ url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees', adaptor: new ODataV4Adaptor}).executeQuery(new Query().range(4, 7)).then((e) => {

      var result = e.result;
      var obj = TabInstance.value.ej2Instances
      var itemsData =[];
      var  mapping =  { header: 'FirstName', content: 'Notes' };
      for(var i= 0; i < result.length; i++) {
      itemsData.push({ header: {text: result[i][mapping.header]}, content: result[i][mapping.content] });
     }
    obj.items = itemsData;
    obj.refresh();

});
});

</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>
<template>
  <div id="app">
    <ejs-tab ref="TabInstance">

    </ejs-tab>
  </div>
</template>
<script>

import { TabComponent } from '@syncfusion/ej2-vue-navigations';
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';

export default {
  name: "App",
  components: {
    "ejs-tab": TabComponent
  },
  mounted() {
    new DataManager({ url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees', adaptor: new ODataV4Adaptor }).executeQuery(new Query().range(4, 7)).then((e) => {

      var result = e.result;
      var obj = this.$refs.TabInstance.ej2Instances
      var itemsData = [];
      var mapping = { header: 'FirstName', content: 'Notes' };
      for (var i = 0; i < result.length; i++) {
        itemsData.push({ header: { text: result[i][mapping.header] }, content: result[i][mapping.content] });
      }
      obj.items = itemsData;
      obj.refresh();

    });
  }
}
</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>