How to pass props to template items?

[Keith Nicholas]

If I have something like

      <e-accordionitems>

              <e-accordionitem :key="index" v-for="(program, index) in programs" :header="program.Name"  :content="template1"></e-accordionitem>

    </e-accordionitems>

Now the content is a WEIRD binding to a template.....

  let MyTemplateComponent = Vue.extend(MyTemplate)

with template1 looking something like this :-

 template1() {
              return {
                 template: MyTemplateComponent,

            }

}

How do I bind props to the template?   Do you have any documentation on this?  It seems a very odd way of doing things in vue.   I'm guessing you construct the component, but I'm not sure how you inject things. Or in general how to do all the normal Vue things, like how to doing data binding  or emit events etc.  This content / template system seems common across all the syncfusion controls,  so once I work it out for one, it seems I can use it everywhere.

Unfortunately most everywhere in your documentation you seem to use vue without using .vue files to define the templates and it's not clear at all how to do this stuff.

[Keith Nicholas]

Through various searches and looking at the underlying code, props can be passed to various syncfusion controls that embed the template in a content tag by using the following method :-

      </div>
      <ejs-accordion >
         <e-accordionitems>
            <e-accordionitem :key="index" v-for="(stuff, listofStuff) in programs" :header="stuff.Name"  :content="stuffTemplate(stuff)">
            </e-accordionitem>
         </e-accordionitems>
      </ejs-accordion>
   </div>
 
     data(){
        return {
           listofStuff: [
              {Name: "Stuff!"}
           ],
           stuffTemplate(s) {
              return () => {
                 return {
                    template: {
                       extends: StuffTemplate,
                       propsData: {stuff: s}
                    }
                 }
              }
           }

[Marius Lian]

Hi Keith!

Awesome! You solved the problem and it works for Single File Components.

Here's how it would work for adding a SFC to a tab item and passing props:

      let newTabItem = {

        header: { text: "New View 1" },

        content: function() {

            return {

              template: {

                       extends: Home,

                       propsData: {message: "Hello World!"}

                    }

          }

        }

      };

Here "Home" is a normal Vue Single File Component and the "Hello world" value is passed down to the component.

Thanks,

Marius

[Karthigeyan Krishnamurthi]

Hi Keith / Marius, 

 

We're glad you've found the solution. 

 

Please revert for further assistance. 

 

Regards, 

Karthi 

 

 

[Marius Lian]

Hi Karthi,

I found one new problem testing this:

The component (Home in my sample above) loses the scope/context to the parent.

I am trying to set the message prop in the sample above to a store value (this.$store.state.message) but then I get a error message that store is undefined.

I tried to add "parent: this" to the template assignment in the sample but it did not work.

Any idea how the rendered component can keep the scope/context?

Thanks, 

Marius 

[Keith Nicholas]

Hi Marius.....

I'm guessing your problem is when you are "capturing" this, you haven't shown your code.... but here's where I'd do it :-

     content: function() {

            let self = this;   // this captured.

            return {
              template: {
                       extends: Home,
                       propsData: {message: self.$store}   // if you use 'this' here, it won't be valid.
                    }

          }

[Hareesh Balasubramanian]

Hi Marius, 

Thanks for your update. 

We have prepared a sample, in which the templateContent is referred from the template.Vue file and the sample can be viewed from the following link, 

https://codesandbox.io/s/vue-template-eb1gh 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Tomás]

Was also looking for a way to passing props and accessing global properties that are bound to `this` and found this thread. Thanks for your suggestions!

The only downside of using `self` is that in the template you need to do `this.self.$store`

While looking at the documentation for `extends` (https://vuejs.org/v2/api/#extends) I found another property `parent` (https://vuejs.org/v2/api/#parent).

So you can do this and it will set the component where you define the template as the parent of the template instance:

data () {

return {

cellTemplate: () => ({

template: {

parent: this,

extends: ContentCellTemplate,

propsData: {

message: 'hello'

}

}

})

}

}

This way, in the template component you'll have access to the store, i18n, and other libraries directly from `this.$store`, `this.$t`, ...

Would be nice if you could add a note about both `propsData` and `parent` to the main Syncfusion Vue documentation as passing data and accessing global properties is a very common usecase for someone using Syncfusion with Vue.

Thanks!

Tomás

[Hareesh Balasubramanian]

Hi Tomás, 

Thanks for the suggestion. 

We will include the above-suggested snippets in our Scheduler documentation and it will be reflected in our feature releases. 

Regards, 

Hareesh 

[Peter Vledder]

Hi All,

Thanks for this thread, it really helped me a lot! Does anybody know how to pass back information? How to catch an $emit?

Thanks for your help!

BR,

Peter

[Balasubramanian Sattanathan]

Hi Peter,

Thanks for contacting us.

Can you please share your requirement with more details such as use case scenario, screenshot, or what information you need to pass? 

Kindly share the details to validate your query and provide a prompt solution.

Regards,
Balasubramanian S