Help With Troubles Accessing event Object Properties on Event Handler

[bikathi]

Hi. I have a form that I am writing up as a Vue component. I want the form to be submitted as FormData because there is a section in the form that has file uploads.
This is a section of the top part of the code:

<form
		class="h-fit p-2 w-[45%] space-y-2"
		method="POST"
		@submit.prevent="submitNewEmployeeForm">
....

And this is the event handler that handles the form submission event:

async function submitNewEmployeeForm(event) {
		const formData = new FormData();
		console.log(`Event ${JSON.stringify(event, null, 2)}`);

		for (let i = 0; i < event.target.elements.length; i++) {
			const element = event.target.elements[i];

			if (element.name) {
				if (element.type === 'file') {
					formData.append(element.name, element.files[0]);
				} else {
					formData.append(element.name, element.value);
				}
			}
		}

		console.log(`Form data: ${JSON.stringify(formData)}`);
               // submit form to backend using `useFetch()`

	}

Problem

For some reason, the event.target does not exist and for sure when I print the ...JSON.stringify(event, null, 2) i see the event object is just this:

Event {
  "isTrusted": true,
  "_vts": 1694895914195
}

It's as if Vue is cutting off all the other parts of the event object. Why is this happening? And how can I fix it so that I have full access to the event object in my event handler. PS: I also tried the $event syntax and it still gives the same issue

[HiddenUndefined]

Hola!

If you still need help, maybe you can past your case on stackblitz?

I try repeat your case and in my tiny app I get $event.target without problem, but maybe you have dropped something in from and best way is check your code in stackblitz or you can try create empty vue app and repeat you task case with form in it.

[little-jade]

you can see this demo.

The event object just have 2 own properties. So the event.target is not the own property of event ,but belongs to event's prototype.

[HiddenUndefined]

Very interesting situation and you need to spend more time to understand why a large number of fields from Event are not viewable in the script, but you can still access the Event properties: you case example :)

[bikathi]

Guys i actually found something out for anyone reading this in the future. The event modifier .prevent as used in @submit.prevent=''handlerFunction'' is what is causing the event` object not to be populated.

If you instead write it it as @submit=''handlerFunction'' then in the handler function, write it as plain old Javascript would have you do:

function handlerFunction(event ) {
    event.preventDefault();
    console.log(`event: ${event} `);

    // you now have access to the entire event object and can do what you want with it
} 

You should see all the event properties listed in the console. It now works fine. A bit of trial and error solved the issue.

[HiddenUndefined]

If I don't make mistake, .prevent modifier need only for short variant of event.preventDefault(), if you use .prevent you don't need write this event cancel method.

And if you look it my link from previous comment (and add console.log(event)) you can watch on full Event in console :)

[HiddenUndefined]

I think I found problem and it's JSON.stringify().

Look at this example of your code case: vue-playground.

Important: Look in console :)