Vue dialog content as a vue template

[Oleg]

I have a hard time to figure out how to add some vue data in vue dialog content 

I want to make by own - totally custom dialog for vue grid edit. 

For example - I have showEdit method like this 

 showEdit(args){

        let rowObj= this.$refs.Grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid'));

        let data = rowObj.data;

        let dm = new DataManager({

                url: '/api/account/form_template/'+data.id,

                adaptor: new UrlAdaptor,

            }).executeQuery(new Query()).then((e) => {

              this.editedItem = e.result.data  // an array of data ex: {id:1, name:test,'price:123'}

               this.$refs.footerDialog.show(true); // show the dialog 

        });

and footer dialog defined like this

 <ejs-dialog ref="footerDialog" 

      :header='dialog_header' 

      :target='dialog_target' 

      :width='dialog_width' 

      :buttons='dialog_buttons' 

      :visible='dialog_visible' 

      :content='contentTemplate'

      :close="dialog_close">

        </ejs-dialog>

How should I present my contentTemplate vue to be able to access editedItem in there? 

Is it even possible? 

contentTemplate example

 <v-text-field v-model ="editedItem.name"></v-text-field>

 <v-text-field v-model="editedItem.price"></v-text-field>

etc...

[Prince Oliver]

Hi Oleg, 

Greetings from Syncfusion support. 

We have analyzed your requirement. Yes. It is possible to use Vue Dialog Content as a Vue template. We have assigned dataSource through beforeMount event through Vuex store and have updated the Dialog component content dynamically through button click. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue-1344025965  

In above sample, we have covered the following things, 

• Render the Dialog component and a Button component in App.vue page. Initially, hide the dialog component by disabling the visible property.
• Axios post is triggered, when you click the button. After this post succeeded, we have passed the item into the child component(ItemList.vue) by setting data and also Dialog content is dynamically updated.
• Now, Dialog content rendered with another vue component data.
• We have used a child component as an HTML input element instead of using <v-text-field> tag.

Let us know if you need any further assistance on this. 

Regards, 

Prince