1. Home
  2. Forum
  3. Vue
  4. passing props to dialog content

passing props to dialog content

Hello 

I am using the dialog component I want to pass props to it so that I can render a list using v-for 

I did find this topic 
https://www.syncfusion.com/forums/148803/pass-data-props-to-component-used-in-dialog-template

and did try this but i am getting a watcher node 1 error when using this I am not using any watchers in my that would cause t his error .. 

wondering if you could help out in why i am getting that error if it is related to the new dialog box since the controls have been updated since that post that I reference 
is there another way of doing this ?

please advise

6 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team January 21, 2021 07:51 AM UTC

Hi David, 
 
 
Greetings from Sycnfusion support. 
 
 
We have validated your query “I want to pass props in Dialog so that I can render a list using v-for, but it throws watcher node 1 error”. 
 
This can be achieved by using the props data as a array collection, the error may have occurred because the props date type mismatch. We have prepared a sample for your reference, 
 
Code Snippet: 
 
<template> 
    <div> 
      <ul id="dialogList"> 
        <li v-for="item in contentProp" :key="item.message"> 
          {{ item.message }} 
        </li> 
      </ul> 
    </div> 
  </template> 
 
<ejs-dialog id="dialog" ref="templateDialog" :target="target" :height="height" :width="width" :visible="false" :allowDragging="true" 
    :header="headerTemplate(headerProp)" 
    :content="contentTemplate(contentProp)" 
    :footerTemplate="footerTemplate(footerProp)" :showCloseIcon="true" 
></ejs-dialog> 
 
data: function () { 
    return { 
      headerProp: "", 
      contentProp: { 
        type: Array, 
      }, 
               ……… 
               ……… 
         contentTemplate: function () { 
    return () => { 
      return { 
        template: { 
          extends: ContentTemplate, 
          propsData: { 
            contentProp: [ 
              { message: "List Item 1" }, 
              { message: "List Item 2" }, 
              { message: "List Item 3" }, 
              { message: "List Item 4" }, 
            ], 
          }, 
        }, 
      }; 
    }; 
  }, 
 
 
 
Please check the above code snippet and the sample and let us know if it resolves your issue. 
 
Regards, 
Revanth 


DW David Wisenbaugh January 21, 2021 08:15 AM UTC

So following your example in code sandbox this is what I have 

 <maintenance-modal
            :buttons="maintenanceWindowButtons"
             target="#dialogTarget"
            :position="maintenanceModalPosition"
             width="50%"
            :isModal="isMaintenanceModal"
            :header="setMaintModalTitle"
            :content="maintenanceTemplate(contentProp)"
            :visible="showMaintenanceModal"
            :maintenance-list-items="maintenanceListItems"
            @modal-close-confirmation="modalCloseConfirmation"
            @keyup.esc="modalCloseConfirmation"
        />

and in the data/return 

 contentProp: { type: Array },

        maintenanceTemplate: function () {
            return () => {
                return {
                    template: {
                        extends: MaintenanceContent,
                        propsData: {
                            contentProp: [this.maintenanceListItems] <-- this being my data from my database 
                        }
                    }
                }
            }
        },

still getting error 

[Vue warn]: Error in callback for watcher "content": "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

found in

---> <DialogComponent>
       <HiConfirmation> at src/components/Modal/Hi-Modal.vue
         <VApp>
           <App> at src/App.vue
             <Root>
webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

please advise 

RK Revanth Krishnan Syncfusion Team January 22, 2021 07:32 AM UTC

Hi David, 
 
 
Good day to you. 
 
 
We have validated your query “Still getting the console error ` TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.`”. 
 
We have checked the code snippet shared and we couldn’t reproduce the issue from our end. And we suspect that this may have occurred due to the return data from your `database`. So can you please ensure the return data from the database. 
 
If the issue still occurs can you please share us with the below details, 
  • Sample data content from the database.
  • Dialog content Template (‘maintenanceTemplate’) code snippet.
  • Issue reproducing sample or any other simple way to reproduce the reported issue.
 
The above details will be helpful for us to validate and reproduce the reported issue from our end and assist you at the earliest? 
 
Regards, 
Revanth 


DW David Wisenbaugh January 22, 2021 08:58 PM UTC

Something i did not mention is that I have the modal dialog as a custom component structured like this 

<template>
    <div id="dialog-container" class="control-section">
        <div id="dialogTarget">
            <ejs-dialog :target="target"
                        :isModal="isModal"
                        :visible="visible"
                        :width="width"
                        :content="content"
                        :open="modalDlgOpen"
                        :close="modalDlgClose"
                        :buttons="buttons"
                        :position="position"
                        :header="header"
                        showCloseIcon="true"/>
        </div>
    </div>
</template>

<script>
export default {
name: 'Hi-Confirmation',
    props: {
        /**
         * A property that sets the visibility of the confirmation dialog
         */
        visible: { type: Boolean },
        /**
         * A property that sets the content of the confirmation dialog
         */
        content: { type: [String, Function, Array, Object] },
        /**
         * A property that sets the header of the confirmation dialog
         */
        header: { type: String },
        /*
         * A Property that sets weather the dialog is a modal or not
         */
        isModal: { type: Boolean },
        /**
         * A property that sets the width of the dialog
         */
        width: { type: String },
        /**
         * A property that sets the postion of the dialog
         */
        position: { type: [Object, String] },
        /**
         * A Property that sets the target of the dialog this is
         * usually the div id that the dialog is enclosed in
         */
        target: { type: String },
        /**
         * A property that sets the buttions of the dialog
         */
        buttons: { type: [Array, Object] }
    },
    methods: {
        /**
         * A function that opens the dialog
         */
        modalDlgOpen () {
            this.$refs.modalDialog.show()
        },
        /**
         * A function that closes the dialog
         */
        modalDlgClose () {
            this.$emit('modal-close-confirmation')
        }
     }
}
</script>

I know that this actually works is because I am using it somewhere else in my application with no issues but sending simple content in a computed property.

The current issue  that we are having is that we need to set a component as the content with props. I did the simple example with out my data but with the formatting like t he example below and still getting the node error.

I checked the return data from my database and that is coming across normally there is no issue there.

I also set the data type to Array, Object, Function, String for the datatypes for content prop on the custom dialog as you can see above.


Since I am using this as a custom component is there a different way that I can fill the content or does the above example still work. mind you I am passing the data from parent to child to populate the dialog content component. 

I think to reproduce the error you have to make it a custom component then try to send the data 
let me know what you come up with 
I look forward to your reply .

RK Revanth Krishnan Syncfusion Team January 25, 2021 12:40 PM UTC

Hi David, 
   
We are currently validating the reported query with the shared code snippet with high priority, we will update you with further details on or before 27th January. 
 
We appreciate your patience till then. 
   
Regards,   
Revanth 


RK Revanth Krishnan Syncfusion Team January 28, 2021 01:47 PM UTC

Hi David, 
 
 
Good day to you. 
 
 
We have further validated your query, and this issue occurs because the content passed as a string, and the content props needs to be passed to the template where the template can be set to the content property of the dialog. We have prepared a sample for your reference, 
 
Code Snippet: 
 
<template> 
  <div id="childDialogTarget"> 
    <ejs-dialog id="childDialog" ref="customTemplateDialog" visible="true" allowDragging="true" minHeight="200px" 
      :target="childTarget" 
      :content="dialogChildTemp" 
    ></ejs-dialog> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
 
var dialogChildContent = Vue.component("demo2", { 
  template: `<div> 
    <ul id="dialogList"> 
      <li v-for="item in this.$parent.$parent.$props.contentProp" :key="item.message"> 
        {{ item.message }} 
      </li> 
    </ul></div>`, 
}); 
 
export default { 
  data: function () { 
    return { 
      dialogChildTemp: function () { 
        return { 
          template: dialogChildContent, 
        }; 
      }, 
    }; 
  }, 
  name: "ContentTemplate", 
  props: { 
    contentProp: { type: Array }, 
    childTarget: { type: String }, 
  }, 
}; 
</script> 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


Marked as answer
Loader.
Up arrow icon