Vue Js and form-data Event: A deeper look into handling form

Hey there #Vue.js2 I'm facing an issue while trying to create a function that is called within a form submit event. This particular function needs both the EVENT and ID as parameters. The problem arises when I call this function, as I am unable to specify the event parameter without encountering an error. Consequently, my form data and ID become undefined in the logs. Is there a more efficient way to manage my form?

 updatePost(event, id) { 
  const postId = id;
  const updatedPost = new FormData(event.target); // Is there an alternative to using the event parameter for this? 
  console.log(updatedPost, postId);
},
 // Here's how it's called in my Template but: 
 <form @submit.prevent="updatePost(post.id)">

ps: The form consists of 2 text inputs and 1 file input.View Vue.js screenshot

Answer №1

When working with event handling in Vue.js, the original event is passed as $event inside the v-on: handler.

For more information, check out the documentation: Methods in Inline Handlers

In some cases, it may be necessary to access the original DOM event within an inline statement handler. This can be achieved by passing it into a method using the special $event variable.

To implement this, you can use the following syntax:

<form @submit.prevent="updatePost($event, post.id)">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing multiple functions to child components in ReactJS as a single prop

I am utilizing the technique of passing multiple functions as individual props from the parent component to its child components. Everything is working correctly without any errors or problems, but I'm interested in exploring if there is a more effici ...

Get the Vue PDF now!

Whenever I use this function in Postman, the PDF is downloaded successfully. However, when I try to call it from the page, the request is made but the download does not happen. I really need it to be able to download. ,generateFarmerPDF:function (id) { ...

Display function not functioning properly following AJAX request

I'm working on a functionality where I want to initially hide a table when the page loads, and then display it with the results when a form is submitted using Ajax. The issue I'm facing is that the code refreshes the page and sets the table back ...

By default, VueRouter should automatically select the first child route

Hello everyone, I am currently utilizing Vue-Router version 2.5.3 and have implemented the Route structure outlined below. path: "/admin", component: require("./views/layouts/MasterLayout.vue"), meta: { requiresAuth: true }, children: [ { ...

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...

Integrating node.js into my HTML page

Forgive me for sounding like a newbie, but is there a simple way to integrate node.js into my HTML or perhaps include a Google API library? For example: <script>google.load(xxxx)</script> **or** <script src="xxxx"></script> ...

I find the JSX syntax to be quite perplexing

While examining some code, I came across the following: const cardSource = { beginDrag(props) { return { text: props.text }; } }; When working with JSX block code or building objects, I usually use {}. The cardSource variable in this co ...

Creating a custom jQuery selector

I've been struggling with a particular problem all day today, trying different approaches but still unable to find a solution. The crux of the issue is this: I have multiple JavaScript functions running to determine whether certain variables should b ...

Limit DerbyJS to re-rendering specific DOM elements

Currently, DerbyJS (visit http://derbyjs.com) functions by replacing everything in the body tag of the document each time a link is clicked. Is there a way to utilize the template, but replace only the content inside #main-content instead of refreshing th ...

Using Selenium with Python to interact with a dynamically generated object that does not have an identifying id or name

Whenever a Right click is performed, an options popup/screen will appear with dynamic content/element. Here is the Options Popup: https://i.stack.imgur.com/TfxpC.png This dynamic content/element will disappear as soon as the mouse is clicked elsewhere o ...

Puppeteer has a limit of running only three instances on Heroku

Currently, I am in the process of developing a website that employs puppeteer to extract information from another site. The npm server works flawlessly on my local machine, but once deployed on Heroku, it halts after processing the first three files. The ...

Utilizing AngularJS and PHP to power an email submission form

I'm encountering an issue where the email I'm sending with AngularJS and PHP has empty parameters like name, email, etc. Despite my efforts to validate input using AngularJS, the data doesn't seem to be reaching my email account correctly. ...

Is there a way to make a <div> load automatically when the page starts loading?

I'm having an issue with my code where both <div> elements run together when I refresh the page. I want them to display separately when each radio button is clicked. <input type="radio" name="cardType" id="one" class="css-checkbox" value="db ...

I'm feeling completely lost trying to understand cors in conjunction with fetch, particularly when an options request is

I am using whatwg fetch in the code snippet below: const headers = new Headers(); //uncommenting this causes the preflight options request to be sent //headers.append('x-something', 'foo'); const response = await fetch(&apos ...

Puppeteer Alert: Unable to Locate Node for specified selector

When using Puppeteer to interact with an input element on a requested URL, I encountered an issue. First, I entered a quantity like this: await page.type('#bidamount_temp', bidAmount); However, when trying to click on the following button after ...

Unidentified googletagmanager detected in vendors segment

Recently, my ad blocker detected an unfamiliar Google Tag Manager request originating from a chunk provided by one of my vendors. Is it typical for tracking to be embedded in dependencies like this? And what type of information can be collected from my we ...

React MUI: Dynamic and Adaptive sidebar

I'm currently working on integrating React Material UI: Persistent + Responsive drawer to create a responsive layout for mobile devices with a persistent drawer for larger screens. I've come across some code that almost fits my requirements, but ...

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

Struggling with serving static content on NodeJS using Express.js

I set up a basic NodeJS and Express server on my development machine running Windows 10. var express = require('express'); var app = express(); app.use(express.static('app')); app.use('/bower_components', express.static(&apo ...

Issues with implementing KendoUI's datepicker in conjunction with Angular

My index.html file contains the following imports: <script src="content/js/angular.js"></script> <link href="content/js/kendo.common-material.min.css" rel="stylesheet" /> <link href="content/js/kendo.material.min.css" rel="styleshe ...