Vue Accordion - Overview

The Accordion UI component contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this UI component very useful for presenting information in a limited amount of space.

View Demo

The following code adds a simple Accordion to your page. Note that each data source object contains the title field, whose value goes to the title of the panel.

App.vue
  • <template>
  • <DxAccordion
  • :data-source="accordionData"
  • item-template="item">
  • <template #item="{ data }">
  • <div>
  • <p v-for="key in getItemKeys(data)">
  • {{key}}: {{data[key]}}
  • </p>
  • </div>
  • </template>
  • </DxAccordion>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxAccordion from "devextreme-vue/accordion";
  •  
  • export default {
  • components: {
  • DxAccordion
  • },
  • data() {
  • return {
  • accordionData: [{
  • title: "Personal Data",
  • firstName: "John",
  • lastName: "Smith",
  • birthYear: 1986
  • }, {
  • title: "Contacts",
  • phone: "(555)555-5555",
  • email: "John.Smith@example.com"
  • }, {
  • title: "Address",
  • state: "CA",
  • city: "San Francisco",
  • street: "Stanford Ave"
  • }]
  • };
  • },
  • methods: {
  • getItemKeys: function(item) {
  • return Object.keys(item);
  • }
  • }
  • };
  • </script>
See Also