Pass data/props to component used in dialog template

[Miles Benson]

Hi,

I see this example 

https://ej2.syncfusion.com/vue/demos/#/material/dialog/template.html

Is there a way to pass props or data into the template components used for the content/header/footer etc?

Thanks

Miles

[Sureshkumar P]

Hi Miles, 

 

Greetings from Syncfusion support.

 

Yes, you can pass props to template components used in dialog content/header/footer. 

 

Please find the steps to configure the sample and pass data to dialog’s content template alone 

 

 

1.     Create content template with props 

<template> 

    <div> 

        <span>{{contentProp}}</span> 

    </div> 

</template> 

 

<script> 

    export default { 

        name: "ContentTemplate", 

        props: ["contentProp"] 

    }; 

</script> 

 

 

2.     import the content template vue file in App.vue file and configure propsData with same name is used in content template file. 

 

<script> 

    import ContentTemplate from "./components/Content"; 

    export default { 

        data: function () { 

            return { 

                contentTemplate: function () { 

                    return () => { 

                        return { 

                            template: { 

                                extends: ContentTemplate, 

                                propsData: { contentProp: "Dialog Content" } 

                            } 

                        }; 

                    }; 

                } 

            }; 

        } 

    }; 

</script> 

 

 

3.     Then bind content template into dialog content property with props variable as arguments. 

 

contentTemplate(contentProp) 

 

<template> 

    <ejs-dialog :content="contentTemplate(contentProp)"></ejs-dialog> 

</template> 

 

 

Note:  Same way we explained in above, you can pass props to the header, footer template 

 

  

 

We have prepared a sample to meet your requirement, please view it in the below link 

 

Demo sample: https://codesandbox.io/s/vue-template-zv2dr  

 

Regards, 

Sureshkumar P 

[Miles Benson]

Hi,

Thank you for that.  Very helpful.

Are you able to see this sandbox?

https://codesandbox.io/s/vue-template-cdk9f

In there I have added a click handler to the footer button and set it to emit a "close-event".

Then in the App.vue I added @close-event="onCloseEvent" to the ejs-dialog declaration, and defined the onCloseEvent method.

However, I can see using the Vue tools that the event is emitted, but it's not caught by the App.vue handler.

Is there something I'm missing/doing wrong here?

Adding: I see that the footer component of the dialog has no $parent - presumably this is what is stopping any event being passed upwards?

Thanks

Miles

[Sureshkumar P]

Hi Miles,

 

@close-event binding works with component here we used function template, so it won’t work. 

 

So, we suggest you, use Event Bus approach to the emit event , which used to catch by any of component in the application without parent child limitation.  

 

https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/  

we modified a sample based on your requirement. please refer the sample here: https://codesandbox.io/s/vue-template-gze5m  

 

Regards, 

Sureshkumar P 

[Miles Benson]

Hi,

Thanks for that.  Yes, I'm familiar with the event bus concept - that seems like a good way forward.

Thanks

Miles

[Gurunathan A]

Hi Miles, 

Thanks for the update.  

Regards, 

Gurunathan