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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to pass props to template items?

Thread ID:

Created:

Updated:

Platform:

Replies:

147570 Sep 17,2019 03:51 AM UTC Sep 25,2020 08:18 AM UTC Vue 6
loading
Tags: Accordion
Keith Nicholas
Asked On September 17, 2019 03:51 AM UTC


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

Marius Lian
Replied On 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


Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 18, 2019 04:52 AM UTC

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


Marius Lian
Replied On 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 

Keith Nicholas
Replied On 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.
                    }

          }

Hareesh Balasubramanian [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon