How to emit FormData object in vuejs?

Question

I'm trying to emit a FormData object in from child component to parent Component. Here is some code what I'm trying:

Child Component

onAddFile(error, file) {
  const formData = new FormData();
  formData.append(this.fileName, file.file);
  console.log(...formData); // here it show the output
  this.$emit("input", formData);  // not working here
}

I am trying to store the emitted data in a object in parent component. but it just stores a String. In the case of console.log it shows following.

How to solve it ?

How are you handling the $emit("input") function in parent page?? — Hello World
– Hello World, Commented Feb 23, 2021 at 11:26
can you show some code from parent component of how you are handling the data? — Hello World
– Hello World, Commented Feb 23, 2021 at 11:28

tony19 · Accepted Answer · 2022-07-16 00:37:00Z

1

In your parent, you could watch for the emit event with (to at least debug)

<div @input="captureFormData"></div>

methods: {
  captureFormData(capturedData) {
    console.log('captured here', capturedData)
  }
}

You could also use the .sync modifier but it is gently deprecated in Vue3 AFAIK.

Here is a reminder on how v-model works on components

<input v-model="searchText">
<!-- is equivalent to -->
<input
  :value="searchText"
  @input="searchText = $event.target.value"
>

So, if your logic works with this snippet, it may work here too.

edited Jul 16, 2022 at 0:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 23, 2021 at 15:24

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

Collectives™ on Stack Overflow

How to emit FormData object in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related