从视图处理 toFormData答案

【问题标题】：process toFormData from view从视图处理 toFormData
【发布时间】：2019-12-25 01:17:26
【问题描述】：

我想知道是否有人可以为我回答这个问题，也许我在这里以不正确的方式使用 Vue。

我正在使用 vue-router 链接到带有模板的 .vue 文件。所以我使用 Submit Artwork 引用下面的代码

我正在开发一个表单，并且想使用我认为在 Vue() 实例上的 toFormData() 函数。但是我无法访问 vue 实例。

目前我对 app.toFormData(var) 或 this.toFormdata(var) 的调用将产生错误“404 cannot POST”，因为它失败了无效函数。

如何访问这个函数以便我可以使用它来解析输入的表单数据？

<template>
  <div class="submitArtwork">

    <div class="container">

        <hr class="bg-info">


                  <form id="paintingForm" action="#" method="post">
                    <div class="form-group">

                      <v-text-field 
                        name="aa_name"
                        label="Name of Painting"
                        id="aa_name"
                        v-model="newPainting.aa_name"
                      ></v-text-field>

                      <v-autocomplete
                        label="Medium"
                        :items="mediums"
                        v-on:mouseover="activateHelper('mediumHelper');"
                        v-on:mouseleave="activateHelper('');"
                        v-model="newPainting.aa_medium"
                      ></v-autocomplete>

                      <v-autocomplete 
                        label="Country (optional)"
                        :items="country_list"
                        v-on:mouseover="activateHelper('countryHelper');"
                        v-on:mouseleave="activateHelper('');"
                        v-model="newPainting.aa_country"
                      ></v-autocomplete>

                      <v-autocomplete
                        label="Tags (optional)"
                        :items="tags"
                        multiple
                        v-on:mouseover="activateHelper('tagHelper');"
                        v-on:mouseleave="activateHelper('');"
                        v-model="newPainting.aa_tags"
                      ></v-autocomplete>

                      <v-file-input :rules="rules" prepend-icon="attachment" accept="image/*" multiple label="File input" @change="onFilePicker"></v-file-input>

                      <v-switch
                        v-model="consentCheck"
                        :label="`Consent: ${consentCheck.toString()}`"
                      ></v-switch>

                    </div>



                    <div class="form-group">
                      <button class="btn btn-info btn-block btn-lg" @click="showAddModal=false; addPainting();">Submit Painting</button>
                    </div>

                  </form>
...

</template>

<script>
export default {
    name: 'submitArtwork',

    data: function() { 
        return { 
      countryHelper: false,
      tagHelper: false,
      mediumHelper: false,
      newPainting: {aa_fbid: "", aa_a_firstname: "", aa_a_surname: "", aa_a_email: "", aa_country: "", aa_name: "", aa_tags: "", aa_medium: ""},
      country_list: [""],
      tags: [,
      ],
      mediums: [
      ],    
        errorMsg: false,
        successMsg: "",
        showEditModal: false,
      showAddModal: true,
      consentCheck: true,
      user: { 
        picture: { data: { url: '' } }
        }, 
      rules: [
        value => !value || value.size > 2000000 || 'Photo size should be less than 2 MB!',
      ],

    }

    }, 
  mounted() {
    showAddModal=true;
  },
  methods: {
    activateHelper(helper) {
      this.countryHelper=false
      this.tagHelper=false
      this.mediumHelper=false
      if(helper == "countryHelper") {
        this.countryHelper=true
      }
      else if(helper == "tagHelper") {
        this.tagHelper=true
      }
      else if(helper == "mediumHelper") {
        this.mediumHelper=true
      }      
    },
    addPainting() {

// ERRORS OUT HERE // ------------------------------------>
      var formData = toFormData(this.newPainting)

      axios.post("http://localhost/process.php?action=create", formData).then(function(response) {
        app.newUser = {name: "",email: "",phone: ""};
        if(response.data.error) {
            app.errorMsg = response.data.message;
        }
        else{
            app.succcessMsg = response.data.message;
            app.getAllUsers();
        }
      });
      */
    },
  } 
}
</script>

<style>
  ...
</style>

谢谢

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

问题在于toFormData 不是您实例上的方法（Vue 没有任何预定义的实例方法，除了生命周期挂钩）。您还必须通过this.method() 访问实例方法。

您是指 HTML FormData API 吗？ https://developer.mozilla.org/en-US/docs/Web/API/FormData

【讨论】：

【解决方案2】：

您可以创建一个计算属性并在其中准备表单数据以供请求。遍历 JSON 属性并将每个数据添加到表单数据。或者你可以添加 ref=“form” 来形成并像这样使用： var formData = new FormData(this.$refs.form)

【讨论】：