FormData object is empty when using vue @submit directive

Question

I came across some weird edge case and I narrowed it down to a solution. I created a form with vue and empty strings were being sent down to the server. I narrowed it down to the @submit directive. If I write form.addEventListener('submit') everything works as it should but with the @submit directive it does not work.

The solution is to use the addEventListener method but I'm not sure if I did something wrong here or if this is a bug with vue's v-on directive

Runnable example: https://stackblitz.com/edit/web-platform-izreva?file=index.html

NOTE: I know about the form data object and how to view it with

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value})
}

In the below snippet if you uncomment the code then it works with addEventListener.

const form = document.querySelector('#test-form')

const app = Vue.createApp({
  name: 'test app',
  methods: {
    test(e) {
      e.preventDefault()
      console.log(e)

      const formData = new FormData(form)
      for (const [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`)
      }
    }
  }
}).mount('#app-main')

// const form = document.querySelector('#test-form')
// form.addEventListener('submit', e => {
//   e.preventDefault()

//   const formData = new FormData(form)
//   for (const [key, value] of formData.entries()) {
//     console.log(`${key}: ${value}`)
//   }
// })

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js" defer></script>
  </head>
  <body>
    <h1>app</h1>
    <div id="app-main">
      <form @submit="test" id="test-form">
        <input type="text" name="foo">
        <button type="submit">submit</button>
      </form>
    </div>

    <script src="./index.js" defer></script>
  </body>
</html>

Is the FormData empty (no keys), or does it have keys with empty values for each? — Barmar
– Barmar, Commented Feb 3, 2023 at 0:12
Have you checked, on the failing case, if there are errors in the console? — adsy
– adsy, Commented Feb 3, 2023 at 0:12
What happens if you do console.log(document.querySelector("[name='foo']").value); in testSubmit()? — Barmar
– Barmar, Commented Feb 3, 2023 at 0:29

Phil · Accepted Answer · 2023-02-03 00:57:40Z

1

I imagine this is an issue with how the CDN version of Vue parses a template from existing HTML.

Each element is replaced with the Vue compiled element equivalent.

The form you captured at the start is no longer the one emitting the submit event. You can easily check this by comparing form === e.target.

If you use the following it works as expected.

const formData = new FormData(e.target);

In short, you're doing things in a very non-Vue way so it's little surprise you've encountered some friction.

edited Feb 3, 2023 at 0:57

answered Feb 3, 2023 at 0:55

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbzx10299 Over a year ago

Yea that fixed it, can you briefly elaborate on this a bit more? Vue looks at the static html and creates it's own copy and that copy is what emits a submit event correct? Is there a more declarative way of doing this if I am stuck using static html? Perhaps using a template ref? I am using shopify and that is why I gotta import vue via cdn

Phil Over a year ago

@dbzx10299 that sounds about right. TBH I haven't looked very closely at the static HTML compiler. A declarative version might be to use refs to keep track of your elements within the Vue component context. That being said, I see no problem using the event target

Collectives™ on Stack Overflow

FormData object is empty when using vue @submit directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related