We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Vue dialog content as a vue template

Thread ID:

Created:

Updated:

Platform:

Replies:

143538 Mar 26,2019 03:36 AM UTC Mar 26,2019 04:38 PM UTC Vue 1
loading
Tags: Dialog
Oleg
Asked On March 26, 2019 03:36 AM UTC

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 [Syncfusion]
Replied On March 26, 2019 04:38 PM UTC

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. 


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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon