0

I have 'vue2-editor', so good working. I want this values send post with formData,

How can I capture the data in it?

Thanks for Helps..

My Editor Component

<template>
  <div>
    <uax-editor id="editor"></uax-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    "uax-editor": VueEditor
  }
};
</script>

<style></style>

My Form Example..

<form id="formData" @submit="submitForm" enctype="multipart/form-data">
   ...
     <app-editor class="mt-1"></app-editor>
   ...
</form>

This is my Form. Inputs and Images working with FormData, i need editor values :)

enter image description here

My codes now working, thanks for Alireza HI

<template>
  <div>
    <uax-editor id="editor" :value="editor" @input="val => $emit('update:editor', val)"></uax-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    "uax-editor": VueEditor
  },
  props: {
    editor: {
      type: String,
      default: '',
    }
  }
};
</script>

<style>
</style>

and...

<app-editor class="mt-1" :editor.sync="editor"></app-editor>

and...

export default {
  data() {
    return {
      image: '',
      editor: ''
    };
  },
  components: {
    "app-editor": ThisEditor,
    "app-single-update": ThisSingleImageUpdate
  },
  methods: {
    submitForm() {
      event.preventDefault();
      var formData = new FormData(document.getElementById("formData"));

      formData.append('desc', this.editor);
      console.log(this.editor);

      for (var pair of formData.entries()) {
        console.log(pair[0] + ", " + pair[1]);
      }

      axios({
        method: 'POST',
        url: 'http://localhost:3001/uax_designers_addOne',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function(response){
        console.log(response);
      }).catch(function(error){
        console.log(response);
      });
    }
Improve this question
2
  • Do you want to send your data from Form and handle them inside your Editor when the user submit ? Commented May 1, 2020 at 21:54
  • I want to send the data entered by the user with the editor with form data. @MenaiAlaEddine Commented May 1, 2020 at 21:58

1 Answer 1

Reset to default
1

You need to send the form using js and have a data which is your editor value.

Also you need to pass the variable to your component using the sync syntax. Read more about it here: Vue Custom Events

So your components would become like this:

Editor Component:

<template>
  <div>
    <uax-editor id="editor" :value="editor" @input="val => $emit('update:editor', val)"></uax-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    "uax-editor": VueEditor
  },
  props: {
    editor: {
      type: String,
      default: '',
    }
  }
};
</script>

Form Example:

<form id="formData" @submit.prevent="sendData">
   ...
     <app-editor class="mt-1" :editor.sync="editor"></app-editor>
   ...
</form>

export default {
  data: () => ({
    editor: '',
  }),
  methods: {
     sendData(){
        let formData = new FormData();
        formData.append("editor", this.editor);

      let response = await fetch('/your-url', {
        method: 'POST',
        body: formData
      });
      let result = await response.json();
      alert(result.message);
     }
  }
};
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Hello, thanks for help. I'm copied your codes, finally this.editor again send null. formData.append('desc', this.editor); console.log(this.editor); // Null.
@MenaiAlaEddine Because you are passing a data(here editor) as a prop and you can not change and modify a prop. That's the reason that sync has been added to vue. It helps you to emit a function to change the prop using the parent adjusting.
@UğurcanAlyüz I forgot to bind the elements(I mean adding : to :value="editor" and :editor.sync="editor". I have changed the code. Try the new one.
Also I change this line: @input="val => $emit('update:editor', val)"
While it was empty before, now it comes undefined. I think we went one step further. :)
|