1. Home
  2. Forum
  3. Vue
  4. Pass data/props to component used in dialog template

Pass data/props to component used in dialog template

Hi,

I see this example 


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

Thanks
Miles


5 Replies
SP Sureshkumar P Syncfusion Team November 6, 2019 06:53 AM UTC

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 
 
 
Regards, 
Sureshkumar P 


MB Miles Benson November 8, 2019 06:49 PM UTC

Hi,

Thank you for that.  Very helpful.

Are you able to see this sandbox?


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


SP Sureshkumar P Syncfusion Team November 11, 2019 01:08 PM UTC

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.  
 

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


MB Miles Benson November 13, 2019 01:11 PM UTC

Hi,

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

Thanks
Miles


GA Gurunathan A Syncfusion Team November 14, 2019 06:58 AM UTC

Hi Miles, 

Thanks for the update.  

Regards, 
Gurunathan  


Loader.
Up arrow icon