-
Notifications
You must be signed in to change notification settings - Fork 101
Add an example about changing modal content from js #147
-
Hi,
I would like to design a modal dialog in Vue2 and to be able to call it from js to display different content.
With vus-js-modal I was doing this:
showDialog(textArray) {
this.bDialogOpen = true;
this.$modal.show('dialog', {
title: '<div style="color: red;">'+this.T("WARNING")+'</div>',
text: '<div style="">'+textArray.join('<br>')+'</div>',
buttons: [
{
title: 'OK',
default: true,
handler: () => {
this.bDialogOpen = false;
this.bDialogOk = true;
this.$modal.hide('dialog');
}
},
{
title: 'Cancel',
handler: () => {
this.bDialogOpen = false;
this.bDialogOk = false;
this.$modal.hide('dialog');
}
}
]
});
},
I would like to do the same with vue-final-modal.
So I am starting from the example called CustomModal.vue:
I have added inside main.js the following code:
import { vfmPlugin } from 'vue-final-modal'
Vue.use(vfmPlugin)
Then inside App.Vue:
<template>
<div id="app">
<div class="full-screen">
<modals-container></modals-container>
</div>
</div>
</template>
I have added the CustomModal.vue and inside the vue where I would like to display the modal I have added the lines below:
<custom-modal v-model="bDialogOpen" @confirm="confirm" @cancel="cancel">
<template v-slot:title>Hello, vue-final-modal</template>
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
</custom-modal>
But then how can I write the showDialog function to replace title and content ?
showDialog(textArray) {
/// ??
}
Thanks
Beta Was this translation helpful? Give feedback.
All reactions
Hi @vricosti,
Here is the docs example of Dynamic Modal
https://vue-final-modal.org/dynamic-modal#advanced
Maybe like this, you can checkout the DynamicModalOptions type
import CustomModal from '@/components/CustomModal.vue' export default { methods: { showDialog() { this.$vfm.show({ component: CustomModal, on: { confirm() { ... }, cancel() { ... }, }, slot: { title: '<span>Hello, vue-final-modal</span>', default: '<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>' // or default: { component: DefaultSlotComponent, bind...
Replies: 1 comment
-
Hi @vricosti,
Here is the docs example of Dynamic Modal
https://vue-final-modal.org/dynamic-modal#advanced
Maybe like this, you can checkout the DynamicModalOptions type
import CustomModal from '@/components/CustomModal.vue' export default { methods: { showDialog() { this.$vfm.show({ component: CustomModal, on: { confirm() { ... }, cancel() { ... }, }, slot: { title: '<span>Hello, vue-final-modal</span>', default: '<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>' // or default: { component: DefaultSlotComponent, bind: { /* ...props for DefaultSlotComponent */ }, on: { /* ...events for DefaultSlotComponent */ } } } }) } }
Beta Was this translation helpful? Give feedback.