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

[Oleg]

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]

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 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/vue1687763539 

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]

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 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/vue1687763539 

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]

Hi Keith, 

 

Currently, we are validating the reported scenario and will update further details. 

 

Regards, 

Pandiyaraj M 

[Keith Nicholas]

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

[Pandiyaraj Muniyandi]

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