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

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

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?

5 Replies

PO Prince Oliver Syncfusion Team 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 



KN Keith Nicholas replied to Prince Oliver 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?




PM Pandiyaraj Muniyandi Syncfusion Team September 17, 2019 06:07 PM UTC

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



KN Keith Nicholas 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


PM Pandiyaraj Muniyandi Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon