Usage of slots instead of props to inject HTML into components (Dialog and others)?

[Klemens Wittig]

Hello, everybody,

I just looked at your VueJS components - great thing so far!

However, there is one question I would like to ask:

Will it be possible to use the "slot" feature of VueJS in a future version?

In your examples, HTML content is bound using "props" for the dialog header, for example. For this purpose HTML is assembled as a string in the data() method, which seems to me a little like in the year 2000.

Here some sample code from the documentation:

Template with prop-bindings:

 <ejs-dialog 
id='dialog' 
ref="templatedialog" 
:header='header' 
:target='target' 
:height='height' 
:width='width' 
:footerTemplate='footerTemplate' 
:showCloseIcon='true' 
:animationSettings='animationSettings' 
:content='content' 
:open="dlgOpen" 
:close="dlgClose">
ejs-dialog>

Data-Method:...

data: function() {
        return {
            target: '#target',
            height: '75%',
            width: '435px',
            footerTemplate: ' '
            + '' + 'Send',
            header: ''
            +'
 Nancy 
',
            content:  '
'
            + 'Greetings Nancy! When will you share me the source files of the project?
',
            animationSettings: { effect: 'None' }
        }
    },

This approach makes it difficult to include your own components in the header, for example. Vue provides a "slot" feature that allows you to insert HTML or other Vue components directly.

https://vuejs.org/v2/guide/components-slots.html

This would greatly improve the possible uses.

Instead of the data() method, the following code could be used directly in the template, which significantly increases readability and reusability.

Template with slots:

<ejs-dialog 
  id='dialog' 
  ref="templatedialog"  
  :target='target' 
  :height='height' 
  :width='width' 
  :showCloseIcon='true' 
  :animationSettings='animationSettings' 
  :open="dlgOpen" 
  :close="dlgClose">
My Title
 
 
Footer
  
ejs-dialog>

[Karthik Ravichandran]

Hi Klemens, 

 

Thanks for contacting Syncfusion support. 

 

Query:  Will it be possible to use the slot feature of VueJS in future version? 

 

Currently we don’t have a support to handle the slot option in our component. We will consider this as a feature in our side and implement it in any of our upcoming releases. 

To provide the dialog content as HTML elements, we have provided the template support in our component. We have showcased the sample with template support in our online sample browser. Please refer the below link. 

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

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R 

[Prince Oliver]

Hi Eason, 

Thank you for your update. 

Query1: How is the slots support going now? I am rendering content template like this: what if I need to bind some props on edit editTemplate

We have considered this as a feature request and it will be available in any of our future releases. You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/4910/provide-the-scoped-slots-support-for-template-in-the-vue

Query2: Also I tried to put vue compoment between <ejs-dialog><editTemplate :orderid="order_id" /></ejs-dialog>, but I cannot use mutilSelect in the html

We have prepared a sample to meet your exact requirement. Please use content API to render multiselect component in dialog. For your reference we have attached demo sample. 

demo sample: https://codesandbox.io/s/vue-template-w677r

Please let us know if you need any further assistance on this. 

Regards, 

Prince