Hello everyone,
I wanted to do something that I thought to be very simple: I wanted to add generated content inside an accordion item. The vue snippet to go inside is:
<div id="tagContent" class="e-badge e-badge-info" v-for="(item, index) in tagsData" :key="index">
<span>{{ item.key }}:</span>
<span>{{ item.value }}</span>
</div>
A list of badges is to be rendered out of a key-value list named tagsData.
Below code shows all elements of my file that might be relevant, stripping other content. I create a tagsTemplate template that holds the snippet. But the tagsData data is not going in. I tried using props, propsData, data. As tagsData is generated after an axios call, I also had a watch that didn't change anything.
When debugging template.js, I can see that the template text is found, but not the data. If I try a suggestion where the accordion item :content="tagsTemplate(tagsData)", I get a cyclic reference exception. That is why the code below assigns this.tagsData to the template component's tagsData directly.
Maybe it is just a minor thing, but none of the suggestions I found to fixed it have worked so maybe it is a detail I am missing. I hope you can help.
<template>
<div id="app">
<ejs-accordion ref="acrdnInstance">
<e-accordionitems>
<e-accordionitem
header="Keywords"
:content="tagsTemplate"
></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</div>
</template>
<script>
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective, AccordionPlugin } from "@syncfusion/ej2-vue-navigations";
import axios from 'axios';
import { createApp } from 'vue/dist/vue.esm-bundler';
const app = createApp();
app.use(GridPlugin, AccordionPlugin);
export default{
name: 'App',
components: {
"ejs-grid": GridComponent,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective,
"ejs-accordion": AccordionComponent,
"e-accordionitems": AccordionItemsDirective,
"e-accordionitem": AccordionItemDirective,
},
/* The disabled watcher:
watch: {
tagsData: {
handler(newValue, oldValue) {
console.log (oldValue);
console.log (newValue);
if (newValue.length > 0)
this.tagsTemplate = '<tags-list :tags-data="tagsData" />';
},
deep: true,
immediate: true,
}
},*/
data () {
return {
resultDataList: [],
tableData: [],
tagsData: [],
tagsTemplate: function () {
return {
template: app.component('tagsTemplate', {
template: `
<div class="e-badge e-badge-info" v-for="(item, index) in tagsData" :key="index">
<span>{{ item.key }}:</span>
<span>{{ item.value }}</span>
</div>
`,
/*template.js shows propsData, data and props empty, with either definition*/
propsData: {tagsData : this.tagsData}, //?
props: {tagsData: this.tagsData, //?
/*{
type: Array,
default: () => [],
},
*/
},
data: function() {
return {
data: {}, //?
tagsData : this.tagsData, //?
}
},
computed: {}
})
}
},
provide: {
},
methods:
{
calculateTagsData ()
{
var thisData = [];
for (var property in this.resultDataList.tags) {
if (Object.prototype.hasOwnProperty.call(this.resultDataList.tags, property))
{
let value = this.resultDataList.tags [property];
if (value > 5) {
let item = {};
item.key = property;
item.value = value;
thisData.push (item);
}
}
}
return thisData.sort((a, b) => b.value - a.value);
},
},
mounted() {
axios
.get('http://getmydatalist.com/?keyword=TEST')
.then(response => {
this.tagsData = this.calculateTagsData(response.data);
})
.catch(e => {
console.log(e)
})
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
Hi Daniel,
We have checked the reported issue based on the shared details and suspect that accordion content is not rendered using v-for template which is your reported issue. We have prepared sample to render the accordion content using v-for template and which works as expected. Kindly try the attached sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.
Regards,
Satheesh Kumar B
Thank you Sateesh,
I will adapt your sources and see if it does the trick. I can see that the test data yu are using is part of the twitterTemplateVue component. When the data comes from outside the component (generated in app), does it not require props or any way to hand over the data into the component?
Hi Daniel,
We have prepared the sample by passing the props to the editorTemplateVue component as shown in the below code snippet.
Schedule.vue:
<template> <div> <ejs-accordion> <e-accordionitems> <e-accordionitem expanded="true" header="Keywords" :content="onEditorTemplate"></e-accordionitem> </e-accordionitems> </ejs-accordion> </div> </template>
<script> import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from "@syncfusion/ej2-vue-navigations";
import { createApp } from "vue";
const app = createApp(); import editorTemplateVue from "./editorTemplateVue.vue";
var editorTemplate = app.component("onEditorTemplate", { components: { 'editor-template': editorTemplateVue }, data() { return { users: [ { id: 1, name: "john" }, { id: 2, name: "doe" }, ], } }, template: '<editor-template :users="users"></editor-template>' });
export default { name: "schedule", components: { "ejs-accordion": AccordionComponent, "e-accordionitems": AccordionItemsDirective, "e-accordionitem": AccordionItemDirective }, data() { return { onEditorTemplate: function () { return { template: editorTemplate }; }, }; }, computed: {}, methods: { }, provide: { }, }; </script> |
editorTemplateVue.vue:
<template> <div class="custom-event-editor" width="100%"> <span class="e-totoId">{{ users }}</span> <div id="tagContent" class="e-badge e-badge-info" v-for="(accordionData, index) in tagsData" v-bind:key="index"> <span>{{ accordionData.Content }}</span> </div> </div> </template> |
Regards,
Satheesh Kumar B