How do I listen to my own events for dynamic modal?

[alimuradov]

Version

vue-final-modal: 4.0.6
vue: 3.2.45

OS

Ubuntu

Please help me figure out how to listen to events. In the old version, I could assign my own emits myself.
Here is an example from version 3.0
const editPerson = (idPerson: string) => {

  $vfm.show({
    component: PersonEditFrom,
    bind: {
      personId: idPerson,
    },
    on: {
      "after-edit-person": afterEditPerson,
    },
  });
};

In version 4 using useModal() I don't understand how to do the same.

const editPatient = useModal({
  component: PatientEditForm,
  attrs: {
    patientId: "",
    afterEdit() {
      console.log('dfdfdf');
    },
  },
});

[Sergdan1992]

Hi!
You can pass promise as attribute and resolve it before unmount(or other event)

[alimuradov]

Hi! You can pass promise as attribute and resolve it before unmount(or other event)

In this case, in the child component, the parameter with the promise will be in props? It would be nice if there would be such an example in the cases.

[hunterliu1003]

@alimuradov
You can use on as prefix to handle the events, for example:

const editPatient = useModal({
  component: PatientEditForm,
  attrs: {
    patientId: "",
    onAfterEdit() {
      console.log('dfdfdf');
    },
  },
});

Checkout documentation for more detail: https://vue-final-modal.org/api/composables/use-modal#passing-props-and-events

[alimuradov]

@hunterliu1003 Thank you for your help. I declared emit in the child component

const emit = defineEmits<{
  (e: "after-edit"): void;
}>();

and try to call it like this

<button
          class="inline-block mx-2 px-6 py-2.5 bg-gray-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out"
          @click="$emit('after-edit')"
          type="button"
        >
          TestEmit
        </button>

But it doesn't work. What am I doing wrong, please tell me

[hunterliu1003]

@alimuradov
Maybe it's typo issue
Maybe use (e: "afterEdit"): void; , emit('afterEdit'), then handle event with onAfterEdit.
If use (e: "after-edit"): void; , emit('after-edit'), then it will be onAfter-edit. I'm not sure about this

[alimuradov]

@alimuradov Maybe it's typo issue Maybe use (e: "afterEdit"): void; , emit('afterEdit'), then handle event with onAfterEdit. If use (e: "after-edit"): void; , emit('after-edit'), then it will be onAfter-edit. I'm not sure about this

Thank you very much, you helped a lot. It was very simple.

        <button
          class="inline-block mx-2 px-6 py-2.5 bg-gray-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out"
          @click="$emit('afterEdit')"
          type="button"
        >
          TestEmit
        </button>

const emit = defineEmits<{
  (e: "afterEdit"): void;
}>();

my form

const editPatientForm = useModal({
  component: PatientEditForm,
  defaultModelValue: false,
  attrs: {
    patientId: "",
    onClosed() {
      loadFromServer();
    },
    onAfterEdit() {
      console.log('dfdfdf');
    },
  },
});

[JshGrn]

I am confused here still, but better than reading the docs, how are you setting 'patientId' when opening the model? Do I have to manage my own state? Is there an example here?

I am trying to essentially do open(rowUuid) and then in the onConfirm know exactly what rowUuid has been passed back