javascript - 如何在表单数据中附加 Vue 编辑器值 - 已修复

Question

我有“vue2-editor”，工作得很好。我希望这个值与 formData 一起发送，

如何捕获其中的数据？

感谢您的帮助..

我的编辑器组件

<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>

我的表单示例..

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

这是我的表格。使用 FormData 的输入和图像，我需要编辑器值:)

<小时/>

我的代码现在可以工作了，感谢 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>

还有...

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

还有...

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);
      });
    }

Answer 1

您需要使用 js 发送表单，并拥有一个 data，这是您的 editor 值。

您还需要使用 sync 语法将变量传递给组件。 在这里阅读更多相关信息: Vue Custom Events

所以你的组件会变成这样:

编辑器组件:

<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 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);
     }
  }
};