Update data and force a refresh

[James Boomer]

I have an accordian  tha loads content via a templte.  i have a date picker as an outside control.  I am trying to refresh the accordion content when the date changes, and this is proving diffcult.  the initial load works but not the data changes.  I was using a template like this:

​

activeProjectsTemplate(date) {
return () => {
return {
template: {
extends: ActiveProjectsGrid,
propsData: {date: date}
}
}
}
},

but since it's prop it doesn't seem tosee the updated chageswork.

[Vijay Ravi]

Hi James,

We prepared a simple accordion sample to dynamically update the calendar value when a date is selected using the date picker in an outside control. It updates the accordion content template value as expected. However, we need some additional details to replicate this exact issue at our end. We kindly request that you provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

• Share us the exact code used, or the exact steps followed to replicate the reported issue.
• If possible, Share the simple issue replicating sample or
• Replicate the issue in our shared sample.

Sample: https://stackblitz.com/edit/accordion-content-dynamically-changed-qnxr6k?file=src%2FApp.vue

Please get back to us with the required details for further assistance.

Regards,

Vijay

[James Boomer]

This does not appear to work when we are using templates for the accordion items since they are being passed as props.  he is a sample of the code:

 here is the accordian

<div class="card-body">
<ejs-accordion ref="SchedulerAccordian" :key="this.updateItem" >
<e-accordionitems>
<e-accordionitem header='User Dashboard' :content='userDashboardTemplate(this.darkMode)'></e-accordionitem>
<e-accordionitem header='Completed Projects' content='Commpleted Projects go Here'></e-accordionitem>
<e-accordionitem header='Active Projects' :content='activeProjectsTemplate(this.date)'></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</div>

Here is the data call out for the template which is in a seperate file with a Prop caled date

activeProjectsTemplate(date) {
return () => {
return {
template: {
extends: ActiveProjectsGrid,
propsData: {date: date}
}
}
}
},

[James Boomer]

My guess is because props are not reactive unless you pass the sync function with it, and it doesn't appear you can pass to the actual data object of them template that it on pulls once when the template is rendered.

[Vijay Ravi]

Hi James,

We suggest that you use the v-slot template to render other components in accordion content for updating the data, as shown in the highlighted code snippet below. Please refer to the shared StackBlitz sample for your reference.

[app.vue]

    <ejs-accordion ref="Accordion_Nested" expandMode="Single">

        <e-accordionitems>

           <e-accordionitem header='Active Projects' expanded="true" :content="'networkFeaturesTemplate'">

            <template v-slot:networkFeaturesTemplate>

              <ActiveProjectsGrid :date="selectedDate" :change="handleCalendarChange"/>

            </template>

          </e-accordionitem>

        </e-accordionitems>

    </ejs-accordion>

<script>

import ActiveProjectsGrid from './ActiveProjectsGrid.vue'; 

export default {

data() {

  return {

    waterMarkText: "Choose a date",

    selectedDate: null

  };

},

methods: {

  handleCalendarChange(value) {

    this.selectedDate = value;

  }

},

components: { 

  'ejs-datepicker': DatePickerComponent,

  'ejs-accordion': AccordionComponent,

  'e-accordionitem': AccordionItemDirective,

  'e-accordionitems': AccordionItemsDirective,

  ActiveProjectsGrid 

}

};

</script>

[ ActiveProjectsGrid.vue]

<ejs-calendar v-model="selectedDate"></ejs-calendar>

 

<script>

import { CalendarComponent } from "@syncfusion/ej2-vue-calendars";

export default {

props: ['date'],

data() {

  return {

    selectedDate: this.date

  };

},

watch: {

  date(newValue) {

    this.selectedDate = newValue;

  }

},

components: { 

  'ejs-calendar': CalendarComponent,

},

mounted() {

  this.selectedDate = this.date;

}

Sample: https://stackblitz.com/edit/accordion-content-dynamically-changed-dt7tcx?file=src%2FApp.vue

Please get back to us with the required details for further assistance.

Regards,

Vijay