Load tab with data source in Vue Tab component

22 Feb 20242 minutes to read

You can bind any data object to Tab items, by mapping it to a header and content property.

To render Vue Tab component with data source, you can check on this video:

In the below 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 items property of Tab.

app.vue

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

    </ejs-tab>
  </div>
</template>
<script>
import Vue from 'vue';
import { TabPlugin } from '@syncfusion/ej2-vue-navigations';
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';
Vue.use(TabPlugin);
export default {
  name: 'app',
  data () {

}, 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>