[Problem] Impossible to load components in tabs - runtime-only build

[Jonathan]

Hi,

I explain my need and the problem :

I retrieve dynamically data couple List[id / name].

I use v-for to generate one tabs by [id/name] :

<e-tabitems>
    <e-tabitem v-for="space in spaceList" :key="space.id" :header='tabNameConvert(space.name)' :content='Template1'></e-tabitem>
</e-tabitems>

Then I want to load in each tab : a component named space "space.vue" with id : space.id in parameter.
Something like <space :space-id="space.id" />
So I try to use your tutorial : https://ej2.syncfusion.com/vue/documentation/tab/how-to/render-other-components-in-tab-using-template/

Problem : 
Event if the template is simple, 
Template1: function () {
    return {
        template: Vue.component('Space', {
            template: '<space></space>',
            data() {
                return {};
            }
        })
    }
}

or if I use exact same example as yours in my projet, 
Template2: function () {
        return {
          template: Vue.component('DatePickerComponent', {
            template: '<ejs-calendar id="calendar" ></ejs-calendar>',
            data() { return { }; }
          })
        }


I have always the same error : 

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

How to avoid this error (I am in npm version) ?
Is there another way to use my vue file "without" live declaration (I try 2 v-for with the html version but, syncfusion tab doesn't link header to data tab and break) ?
I don't want to have performance of other problem activating some realtime building or other.

Thanks by advance,

Jonathan

[Ravikumar Venkatesan]

Hi Jonathan, 

Greetings from Syncfusion support. 

We have validated your reported query “Impossible to load components in tabs” at our end. We have prepared a sample with EJ2 Vue Tab with another component as contentTemplate of the Tab with v-for and it can be available below. 

Sample: https://codesandbox.io/s/ej2-vue-tab-with-the-v-for-with-content-template-function-ntp3l?file=/src/App.vue 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[Jonathan]

It works but another question :

How to pass a props value (parameter) to the component in this way of functionning ?

templateContent: function(totoId) {
    return {
        template: Space,
    };
},

How to pass the "totoId" to the Space template (which have the props[totoId]).

Thanks,

Jonathan

[Ravikumar Venkatesan]

Hi Jonathan, 

Thanks for the update. 

We have validated your reported query “How to pass a props value (parameter) to the component” at our end. We have passed the props value to the component with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[App.vue] 

<template> 

  <div> 

    <div> 

      <H1>Tab</H1> 

      <ejs-tab id="tab_default" heightAdjustMode="Auto"> 

        <e-tabitems> 

          <e-tabitem v-for="(item, index) in itemList" v-bind:key="index" :header="item" :content="templateContent(item)"></e-tabitem> 

        </e-tabitems> 

      </ejs-tab> 

    </div> 

  </div> 

</template> 

 

<style> 

.e-totoId { 

  font-size: xxx-large; 

} 

</style> 

 

<script> 

import Vue from "vue"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

import tempEle from "./template"; 

 

Vue.use(TabPlugin); 

// Define a new component called button-counter 

 

export default Vue.extend({ 

  data: function() { 

    return { 

      templateContent: function(e) { 

        this.totoId[e.id] = e.id; 

        return () => { 

          return { 

            template: { 

              extends: tempEle, 

              propsData: { totoId: this.totoId[e.id] } 

            } 

          }; 

        }; 

      }, 

      totoId: [], 

      itemList: [ 

        { id: "1", text: "Space A" }, 

        { id: "2", text: "Space B" }, 

        { id: "3", text: "Space C" }, 

        { id: "4", text: "Space D" }, 

        { id: "5", text: "Space E" }, 

        { id: "6", text: "Space F" } 

      ] 

    }; 

 }, 

  methods: {}, 

  name: "App", 

  components: { 

    tempEle 

  } 

}); 

</script> 

[template.vue] 

/* eslint-disable */ 

<template> 

  <div> 

    <ejs-calendar></ejs-calendar> 

    <span class="e-totoId">{{totoId}}</span> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

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

Vue.use(CalendarPlugin); 

Vue.component(CalendarPlugin.name, CalendarComponent); 

 

export default { 

  name: "tempEle", 

  props: ["totoId"], 

  data() { 

    return { 

      data: {} 

    }; 

  } 

}; 

</script> 

Sample: https://codesandbox.io/s/ej2-vue-tab-with-the-v-for-with-content-template-function-kx004?file=/src/App.vue 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan