We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to pass props to template items?


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.







10 Replies

KN Keith Nicholas September 18, 2019 01:50 AM UTC

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}
                    }
                 }
              }
           }


ML Marius Lian September 18, 2019 04:43 AM UTC

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



KK Karthigeyan Krishnamurthi Syncfusion Team September 18, 2019 04:52 AM UTC

 
We're glad you've found the solution. 
 
Please revert for further assistance. 
 
Regards, 
Karthi 
 
 



ML Marius Lian September 18, 2019 06:30 AM UTC

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 


KN Keith Nicholas September 18, 2019 09:43 PM UTC

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.
                    }

          }


HB Hareesh Balasubramanian Syncfusion Team September 19, 2019 04:02 PM UTC

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, 

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

Regards, 
Hareesh 



TO Tomás March 10, 2021 08:47 PM UTC

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


HB Hareesh Balasubramanian Syncfusion Team March 11, 2021 01:21 PM UTC

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 



PV Peter Vledder December 23, 2021 06:15 PM UTC

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





BS Balasubramanian Sattanathan Syncfusion Team December 27, 2021 10:58 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon