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

Rendering a Single File Component in Tab Item

Thread ID:

Created:

Updated:

Platform:

Replies:

147477 Sep 12,2019 03:52 AM UTC Sep 19,2019 04:01 PM UTC Vue 8
loading
Tags: Tab
Marius Lian
Asked On September 12, 2019 07:22 AM UTC

Hi Syncfusion,

I have a single file component (Home.vue) and this component is then imported to be used in App.vue.

What I am trying to do is to render that component in a tab doing like this:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: Home
}
}
}
],

And this works nice. The "Home" component is show perfectly in that tab.

However, I need to pass a property to the component on rendering but can't get that to work. I tried like this for instance:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: Home,
props: {
message: "hello"
}
}
}
}
],

But the property is not rendered in the component.

Do you know how I can "send" properties to the component to be rendered in the tab item?

BTW I read this sample:

But it is using "Vue.component" which can't use.

Thanks,
Marius




Marius Lian
Replied On September 12, 2019 07:34 AM UTC

I also tired with a render function which should work for singel file components:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: function(){
render: h => h(Home, {
props: {
message: 'New header text',
}
})
}
}
}
}],

But this isn't working either.



Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 13, 2019 09:09 AM UTC

Hi Marius, 
 
Syncfusion greetings. 
 
We have passed the props to VUE component and the same can be available in below link. 
 
 
Regards, 
Karthi 


Marius Lian
Replied On September 13, 2019 01:33 PM UTC

Hei Karthi,

I don't think it was this I was thinking about. 

I meant to set value of prop on a prop in template.vue. 

Plese let me explain:
  • Let us say you have prop "blogName" in template.vue and the value of this is used in "<h1>{{ this.blogName }} </h1>"
  • Then in App.vue I would like to render template.vue component in a tab AND set value of prop blogName to something.
I cannot see that this sample solves this problem.

Thanks again for your support.

Best regards,
Marius

Vinitha Devi Murugan [Syncfusion]
Replied On September 16, 2019 01:03 PM UTC

Hi Marius, 
 
Thanks for your update. 
 
We have passed the id as props to VUE component and the same can be available in below link.  
 
 
Regards, 
M.Vinitha devi 


Marius Lian
Replied On September 17, 2019 05:32 AM UTC

Hi Vinitha,

Thanks, but my question was about single file component. Your sample is already covered in the documentation.

I tried to apply your sample like this:
export default {
  name: 'app',
  data: function() {
    return {
      headerText0: { text: 'Some header text' },
      contentTemplate: function() {
        return {
          template: Home,
          props: {
            message: "hello world"
          }
        };
      },


Where:
  • Home is a single file component.
  • This has one prop called message.
  • I tried to change props to data and propsData but did not work. 
So still I am unable to render a single file component into a tab.

Thanks,
Marius


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

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


Marius Lian
Replied On September 18, 2019 06:32 AM UTC

Hi Karthi,

Yes, but I got stucked on a new problem. Please check the thread in 147570.

Thanks, 
Marius 

Hareesh Balasubramanian [Syncfusion]
Replied On September 19, 2019 04:01 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