Render other components in accordion using template in Vue Accordion component

11 Jun 20248 minutes to read

You can render other components inside Accordion using Vue template. Through this, we can add content as other components directly with all functionalities to our Accordion. Follow the below guidelines for using the other components as template in Accordion.

• Declare a template in the template section of the “.vue” file. An empty object “data” needs to be initialized in the data option of the default export object in script section.

• The template function needs to be assigned to the content property of the EJ2 Vue Accordion Component.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded='true' header='Calendar' :content='Template1'></e-accordionitem>
        <e-accordionitem header='DatePicker' :content='Template2'></e-accordionitem>
        <e-accordionitem header='Numeric Textbox' :content='Template3'></e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  </div>
</template>
<script setup>
/* eslint-disable */
import { AccordionComponent as EjsAccordion, AccordionItemDirective as EAccordionitem, AccordionItemsDirective as EAccordionitems } from "@syncfusion/ej2-vue-navigations";
import { createApp, } from "vue";
import { CalendarComponent } from '@syncfusion/ej2-vue-calendars';
import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";

const contentTemplate1 = createApp().component('CalendarTemplate', {
  components: {
    'ejs-calendar': CalendarComponent
  },
  template: `<ejs-calendar ></ejs-calendar>`,
  data() { return {}; }
});
const Template1 = () => {
  return {
    template: contentTemplate1
  };
};
const contentTemplate2 = createApp().component('DatePickerTemplate', {
  components: {
    'ejs-datepicker': DatePickerComponent
  },
  template: ' <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker>',
  data() {
    return {
      minDate: new Date("05/09/2017"),
      maxDate: new Date("05/15/2017"),
      dateVal: new Date("05/11/2017")
    };
  }
});
const Template2 = () => {
  return {
    template: contentTemplate2
  };
}
const contentTemplate3 = createApp().component('NumericTextBoxTemplate', {
  components: {
    'ejs-numerictextbox': NumericTextBoxComponent
  },
  template: '<ejs-numerictextbox value="100"></ejs-numerictextbox>',
  data() { return {}; }
});
const Template3 = () => {
  return {
    template: contentTemplate3
  };
};

</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";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded='true' header='Calendar' :content='Template1'></e-accordionitem>
        <e-accordionitem header='DatePicker' :content='Template2'></e-accordionitem>
        <e-accordionitem header='Numeric Textbox' :content='Template3'></e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  </div>
</template>
<script>

import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from "@syncfusion/ej2-vue-navigations";
import { createApp } from 'vue'
import { CalendarComponent, DatePickerComponent } from "@syncfusion/ej2-vue-calendars";
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-accordion": AccordionComponent,
    "e-accordionitems": AccordionItemsDirective,
    "e-accordionitem": AccordionItemDirective
  },
  data: function () {
    return {
      Template1: function () {
        return {
          template: createApp().component('CalendarComponent', {
            template: '<ejs-calendar ></ejs-calendar>',
            components: {
              'ejs-calendar': CalendarComponent,
              'ejs-datepicker': DatePickerComponent,
              "ejs-numerictextbox": NumericTextBoxComponent
            },
            data() { return {}; }
          })
        }
      },
      Template2: function () {
        return {
          template: createApp().component('DatePickerComponent', {
            template: ' <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker>',
            components: {
              'ejs-datepicker': DatePickerComponent,
            },
            data() {
              return {
                minDate: new Date("05/09/2017"),
                maxDate: new Date("05/15/2017"),
                dateVal: new Date("05/11/2017")
              };
            }
          })
        }
      },
      Template3: function () {
        return {
          template: createApp().component('NumericTextBoxComponent', {
            template: '<ejs-numerictextbox value="100"></ejs-numerictextbox>',
            components: {
              "ejs-numerictextbox": NumericTextBoxComponent
            },
            data() { return {}; }
          })
        }
      }
    }
  }
}
</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";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>