Vue Accordion - Customize Item Appearance

For a minor customization of Accordion panels, you can define specific fields in panel data objects. For example, the following code generates three panels, the first and third are not customized, the second is disabled.

App.vue
  • <template>
  • <DxAccordion
  • :data-source="accordionData">
  • </DxAccordion>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxAccordion from "devextreme-vue/accordion";
  •  
  • export default {
  • components: {
  • DxAccordion
  • },
  • data() {
  • return {
  • accordionData: [{
  • title: "Employee",
  • text: "John Smith"
  • }, {
  • title: "Phone Number",
  • text: "(555)555-5555",
  • disabled: true
  • }, {
  • title: "Position",
  • text: "Network Administrator"
  • }]
  • };
  • }
  • };
  • </script>

If you need a more flexible solution, define an itemTemplate and itemTitleTemplate:

App.vue
  • <template>
  • <DxAccordion
  • :data-source="accordionData"
  • item-title-template="title"
  • item-template="item">
  • <template #title="{ data }">
  • <div>
  • <span>{{ data.firstName }}&nbsp;</span>
  • <span>{{ data.lastName }}</span>
  • </div>
  • </template>
  • <template #item="{ data }">
  • <div>
  • <span>{{ data.birthDate }}&nbsp;</span>
  • <span>{{ data.position }}</span>
  • </div>
  • </template>
  • </DxAccordion>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxAccordion from "devextreme-vue/accordion";
  •  
  • export default {
  • components: {
  • DxAccordion
  • },
  • data() {
  • return {
  • accordionData: [{
  • firstName: "John", lastName: "Smith",
  • birthDate: "1986/03/14",
  • position: "Network Administrator"
  • }, {
  • firstName: "Samantha", lastName: "Jones",
  • birthDate: "1972/11/13",
  • position: "Technical Writer"
  • }];
  • };
  • }
  • };
  • </script>

View Demo

You can also customize individual items. Declare them using the dxItem component:

App.vue
  • <template>
  • <DxAccordion>
  • <DxItem title="John Smith">
  • <template #default>
  • <div>Network Administrator</div>
  • </template>
  • </DxItem>
  • <DxItem title="Samantha Jones">
  • <template #default>
  • <div>Technical Writer</div>
  • </template>
  • </DxItem>
  • </DxAccordion>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxAccordion, { DxItem } from "devextreme-vue/accordion";
  •  
  • export default {
  • components: {
  • DxAccordion,
  • DxItem
  • }
  • };
  • </script>
See Also