1. Home
  2. Forum
  3. Vue
  4. How can I pass props from my Vue page into the dataProps that will by used in a modal Dialog ?

How can I pass props from my Vue page into the dataProps that will by used in a modal Dialog ?

Dear support, 

I have a props, "horseCollection", wich returns a list of horses.

Il would like to use this props so as to give it to my propsData inside the "getContentTemplate" method, in order to use it in a dialog.

My problem is that I dont find the way to pass my props "horseCollection" into the "myData" propsData of the "getContentTemplate" method.

Can you help me ?

Here is the code of the vue : 

<template>
<app-layout>
<template>
<div style="text-align:right;margin-right:3%;margin-top:2%">
<ejs-button
class='dlgbtn e-outline e-primary '
title="Ajouter un soin"
v-if="ShowBtn"
v-on:click.native="confirmBtnClick"
>
Ajouter
</ejs-button>
</div>
<div class="col-lg-12 control-section ; position:relative" style="height:360px;">

<ejs-button
class='dlgbtn e-outline e-primary '
title="Ajouter un soin"
v-if="ShowBtn"
v-on:click.native="confirmBtnClick"
>
Ajouter
</ejs-button>

<ejs-dialog
:buttons='confirmDlgButtons'
ref="confirmDialog"
v-bind:visible="true"
:header='confirmHeader'
:animationSettings='animationSettings'
:content='getContentTemplate'
:showCloseIcon='confirmCloseIcon'
:open="dialogOpen"
:close="dialogClose"
:target='target'
:width='dialogWidth'
>
</ejs-dialog>

<ejs-dialog ref="promptDialog" v-bind:visible="false" :showCloseIcon='showCloseIcon' :open="dialogOpen" :close="dialogClose">

<table style="border-collapse: separate;border-spacing: 10px;
width:85%;margin: 0px -5px 0px;">
<tr>
<td>SSID:</td>
</tr>
<tr>
<td><b>AndroidAP</b></td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</ejs-dialog>
</div>

</template>
</app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout";
import Grid from "@/Components/Grid";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import Vue from "vue";
import contentTemplate from "@/Pages/Treatment/Create"

Vue.use(ButtonPlugin);
Vue.use(DialogPlugin);

export default {
components: {
AppLayout
},
props: {
horseCollection: Array,
},
data: function() {
return {
confirmHeader: 'Delete Multiple Items',
confirmContent: '<span>Are you sure you want to permanently delete these items ?</span>',
showCloseIcon: false,
confirmCloseIcon: true,
target: '.control-section',
dialogWidth: '400px',
animationSettings: { effect: 'None' },
confirmDlgButtons: [{ click: this.confirmDlgBtnClick, buttonModel: { content: 'Yes', isPrimary: true } }, { click: this.confirmDlgBtnClick, buttonModel: { content: 'No' } }],
ShowBtn: true,
essai :[
{'name':'bombi', 'id':1},
{'name':'daaa', 'id':2}
],
getContentTemplate: function () {
let self = this;
return {
template : {
extends: contentTemplate ,
propsData: {
myData : ??,
}
}
}
},
}
},

methods: {
confirmDlgBtnClick: function() {
this.$refs.confirmDialog.hide();
},
confirmBtnClick: function() {
this.$refs.confirmDialog.show();
},
dialogClose: function() {
this.ShowBtn = true;
},
dialogOpen: function() {
this.ShowBtn = false;
}
}
};
</script>

<style>
@import "@syncfusion/ej2-base/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material.css";
@import "@syncfusion/ej2-inputs/styles/material.css";
@import "@syncfusion/ej2-navigations/styles/material.css";


.e-btn-hide {
display: none;
}
.control-section {
height: 100%;
max-height: 380px;
overflow: hidden;
}

</style>

3 Replies
GK Gunasekar Kuppusamy Syncfusion Team July 6, 2021 04:32 AM UTC

Hi Sandra, 
  


 
Greetings from Syncfusion support. 
  


 
We have validated your query `How can I pass props from my Vue page into the dataProps that will be used in a modal Dialog? and have achieved this query by passing the props date to the content template.

Code snippets: 


 
contentTemplate: function () {  
    return () => {  
      return {  
        template: {  
          extends: ContentTemplate,  
          propsData: {  
            horseCollection: this.horse.data,  
          },  
        },  
      };  
    };  
  },  
  
export default {  
    data: function () {  
      return {  
        headerProp: "",  
        horse: {  
          data: [  
            { message: "List Item 0" },  
            { message: "List Item 2" },  
            { message: "List Item 3" },  
            { message: "List Item 4" },  
          ],  
        },  
  
…..  
…..  


 

Content.Vue: 
export default {  
  name: "ContentTemplate",  
  props: ["horseCollection"],  
};  

We have also prepared a sample for your reference, 


 
  


 
In this sample, the horse list values are passed to the Content.Vue page and rendered as list type.


please let us know if the solution helps,


Regards, 
Gunasekar 


WM William Morgenweck February 21, 2022 08:10 PM UTC

Hi,


I'm interested in this question also and I was wondering how you can get the Close button in the footer to work and how you would you pass back information from the template to the calling page


BS Buvana Sathasivam Syncfusion Team February 22, 2022 07:23 PM UTC

Hi William, 
 
Query #1: “how you can get the Close button in the footer to work” 
 
You can bind the click event on the button component to the Footer vue component, as shown in the code below. 
 
Footer.vue 
<template> 
  <ejs-button class="e-btn" v-on:click.native="handleClick">{{ 
    footerProp 
  }}</ejs-button> 
</template> 
 
<script> 
export default { 
  name: "FooterTemplate", 
  props: ["footerProp"], 
  methods: { 
    handleClick: function () { 
      alert("Footer button clicked"); 
    }, 
  }, 
}; 
</script> 
 
 
 
Query #2: “how you would you pass back information from the template to the calling page” 
 
We suggest using the Vue Global Event Bus concept to achieve this requirement. By default, this EventBus allows us to emit an event from one component and listen for that event in another component. So we can easily communicate with two Vue components by using this EventBus concept. We have demonstrated how to use this concept in the code below to meet your requirement. 
 
App.vue 
<script> 
import { eventBus } from "./main"; 
 
export default { 
  created: function () { 
    eventBus.$on("ChangeUsername", (data) => { 
      alert(data); 
    }); 
  }, 
}; 
</script> 
 
 
Footer.vue 
<template> 
  <ejs-button class="e-btn" v-on:click.native="handleClick">{{ 
    footerProp 
  }}</ejs-button> 
</template> 
 
<script> 
import { eventBus } from "../main"; 
export default { 
  methods: { 
    handleClick: function () { 
      alert("Footer button clicked"); 
      eventBus.$emit( 
        "ChangeUsername", 
        "Footer component passed information to parent component" 
      ); 
    }, 
  }, 
}; 
</script> 
 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Buvana S 


Loader.
Up arrow icon