Add an example about changing modal content from js

[vricosti]

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

[hunterliu1003]

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 */ }
          }
        }
      })
    }
}