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

Is there a way to pass props or some custom data to template component?

Thread ID:

Created:

Updated:

Platform:

Replies:

144068 Apr 16,2019 08:46 PM UTC Sep 18,2019 05:22 AM UTC Vue 5
loading
Tags: Dialog
Oleg
Asked On April 16, 2019 08:46 PM UTC

I have a question about Dialog component.
As I can see we can use Vue.component() or single file component as Dialog template, as shown here:
https://ej2.syncfusion.com/vue/documentation/dialog/template/  

Is there a way to pass props or some custom data to template component?

Prince Oliver [Syncfusion]
Replied On April 17, 2019 07:27 PM UTC

Hello Oleg, 

Thank you for contacting us. 

Yes. It is possible to pass custom data to template component. We have attached an example where we have assigned child component data content into Dialog component content through beforeMount event using Vuex store. Kindly refer to the following link for the sample 


In above sample, we have covered the following things, 
  • Rendered the Dialog component and a Button component in App.vue page. Initially, we have hidden the dialog component by disabling the visible property.
  • We have passed the item into the child component(ItemList.vue) by setting data when you click the button and Dialog content is dynamically updated.
  • Now, Dialog content rendered with another vue component template data.

Let us know if you need any further assistance on this. 

Regards, 
Prince 


Keith Nicholas
Replied On September 17, 2019 04:49 AM UTC

Hello Oleg, 

Thank you for contacting us. 

Yes. It is possible to pass custom data to template component. We have attached an example where we have assigned child component data content into Dialog component content through beforeMount event using Vuex store. Kindly refer to the following link for the sample 


In above sample, we have covered the following things, 
  • Rendered the Dialog component and a Button component in App.vue page. Initially, we have hidden the dialog component by disabling the visible property.
  • We have passed the item into the child component(ItemList.vue) by setting data when you click the button and Dialog content is dynamically updated.
  • Now, Dialog content rendered with another vue component template data.

Let us know if you need any further assistance on this. 

Regards, 
Prince 


You say

--- We have passed the item into the child component(ItemList.vue) by setting data when you click the button and Dialog content is dynamically updated.

but you haven't

what you have done is set a GLOBAL variable via Vuex,  and in the component you have loaded that global variable.   This wouldn't work well if you had multiple things bound to different items.

You haven't answered how do you bind props to components?



Pandiyaraj Muniyandi [Syncfusion]
Replied On September 17, 2019 06:07 PM UTC

Hi Keith, 
 
Currently, we are validating the reported scenario and will update further details. 
 
Regards, 
Pandiyaraj M 


Keith Nicholas
Replied On September 18, 2019 01:52 AM UTC

Hi ,  I believe the solution I put in https://www.syncfusion.com/forums/reply/147570    would work in this scenario

Pandiyaraj Muniyandi [Syncfusion]
Replied On September 18, 2019 05:22 AM UTC

Hi Keith, 
 
We're glad you've found the solution. Thanks for sharing the solution with us. 
 
Please revert us for further assistance. 
 
Regards, 
Pandiyaraj M 


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