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

我有“vue2编辑器”，工作很好。我想用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>

---

您需要使用

js

发送表单，并且有一个

数据

，它是您的

编辑器

值

您还需要使用

sync

语法将变量传递给组件。 请在此处阅读更多信息：

因此，您的组件将如下所示：

编辑器组件：

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

从“vue2编辑器”导入{Vueditor}；
导出默认值{
组成部分：{
“uax编辑器”：Vueditor
},
道具：{
编辑:{
类型：字符串，
默认值：“”，
}
}
};

表格示例：

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

...
...
导出默认值{
数据：（）=>({
编辑：''，
}),
方法：{
sendData（）{
设formData=new formData（）；
append（“editor”，this.editor）；
let response=wait fetch（“/your url”{
方法：“POST”，
正文：formData
});
让result=wait response.json（）；
警报（结果消息）；
}
}
};

当用户提交时，是否希望从表单发送数据并在编辑器中处理？我希望将用户输入的数据与表单数据一起发送给编辑器@你好，谢谢你的帮助。我复制了你的代码，最后这个编辑器再次发送空。formData.append（'desc'，this.editor）；console.log（this.editor）；//Null。@MENAIALAEDINE，因为您正在将数据（此处为

编辑器

）作为道具传递，并且无法更改和修改

道具

。这就是将

sync

添加到vue的原因。它可以帮助您使用父级调整来发出一个函数来更改道具。@UğurcAnalyzeüz我忘了绑定元素（我的意思是将

：

添加到

：value=“editor”

和

：editor.sync=“editor”

。我已经更改了代码。请尝试新代码。我还更改了这一行：

@input=“val=>$emit>（'update:editor'，val）

以前它是空的，现在它没有定义。我想我们更进一步了。：）

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

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