Having trouble getting help?
Contact Support
Contact Support
Load accordion with data source in Vue Accordion component
11 Jun 20244 minutes to read
You can bind any data object to Accordion items, by mapping it to header
and content
property.
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 Accordion.
<template>
<div id="app">
<ejs-accordion ref="accordionInc">
</ejs-accordion>
</div>
</template>
<script setup>
import { AccordionComponent as EjsAccordion } from '@syncfusion/ej2-vue-navigations';
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { onMounted, ref } from 'vue';
const accordionInc = 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 = accordionInc.value.ej2Instances
var itemsData = [];
var mapping = { header: 'FirstName', content: 'Notes' };
for (var i = 0; i < result.length; i++) {
itemsData.push({ header: 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-navigations/styles/material.css";
</style>
<template>
<div id="app">
<ejs-accordion ref="accordionInc">
</ejs-accordion>
</div>
</template>
<script>
import { AccordionComponent } from '@syncfusion/ej2-vue-navigations';
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
export default {
name: "App",
components: {
"ejs-accordion": AccordionComponent
},
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.accordionInc.ej2Instances
var itemsData = [];
var mapping = { header: 'FirstName', content: 'Notes' };
for (var i = 0; i < result.length; i++) {
itemsData.push({ header: 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-navigations/styles/material.css";
</style>