Closed alimuradov closed 1 year ago
Hi! You can pass promise as attribute and resolve it before unmount(or other event)
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.
@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
@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
@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 Maybe it's typo issue Maybe use
(e: "afterEdit"): void;
,emit('afterEdit')
, then handle event withonAfterEdit
. If use(e: "after-edit"): void;
,emit('after-edit')
, then it will beonAfter-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');
},
},
});
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
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) => {
In version 4 using useModal() I don't understand how to do the same.