How to hide() when this.$modal.show(component) from import

[PandaCodeLab]

Problem:

I am using component from import in Nuxt. Calling modal with this component (ModalDynamic)

I thought for a long time about how to close the modal window when we pass a component to it when calling it, it has no name, we are passing in a component, not a string. So closing works through a data modal attribute. But...

When i am closing modal via this.$modal.hide('dynamic_modal_0') and then open this modal once again ive got data-modal="dynamic_modal_1" and then "dynamic_modal_2" and more...

How can i prevent it? Thanks!

Version:

last

Example & screenshots:

I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

[ellizio]

@PandaCodeLab, Is question still relevant? You can pass the name property this.$modal.show(ModalDynamic, { text: "text", //other component properties }, { name: "YourModalName" }) then call this.$modal.hide("YourModalName")

[EneroPl]

@PandaCodeLab, Is question still relevant? You can pass the name property this.$modal.show(ModalDynamic, { text: "text", //other component properties }, { name: "YourModalName" }) then call this.$modal.hide("YourModalName")

It's not look like a good variant. You know about caller vue-js-modal in index.vue and it's close in vue-js-component, but this naming method is hard code naming without somethink dynamic. If someone will change name in index.vue it's will strange for him that it's not working, because only page and vue-js-modal knows about modal name. Maybe I not right, but I have some problem when I need to pass name dynamicly and using name such as props for component and for modal is meh...

[ellizio]

@EneroPl I don't have problems with hard code because i use that approach only for static dialogs in one instance. For example my dialog service

import Vue from "../main"

import ConfirmModalView from "../components/modals/ConfirmModalView.vue"

const CONFIRM_MODAL_NAME = "ConfirmModalView"

export default {

  showConfirm(text) {
    return new Promise((resolve, reject) => {
      Vue.$modal.show(
        ConfirmModalView,
        {
          text: text,
          okHandler: () => {
            Vue.$modal.hide(CONFIRM_MODAL_NAME, { closedByButton: true });
            resolve();
          },
          cancelHandler: () => {
            Vue.$modal.hide(CONFIRM_MODAL_NAME, { closedByButton: true });
            reject();
          }
        },
        { name: CONFIRM_MODAL_NAME, height: "auto" },
        {
          "before-close": (event) => {
            if (!event.params || !event.params.closedByButton)
              reject();
          }
        }
      )
    });
  }

}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.