title: process toFormData from view
body: <p>I wonder if someone could answer this question for me, maybe I'm using Vue in the incorrect way here. </p>
  
  <p>I'm using vue-router to link to a .vue file with a template. So I'm referencing the below code using Submit Artwork</p>
  
  <p>I'm developing a form, and want to use the toFormData() function which I believe is on the Vue() instance. I cannot access the vue instance however. </p>
  
  <p>At the moment my call to app.toFormData(var) or this.toFormdata(var) will produce an error "404 cannot POST" since it's failing invalid function.</p>
  
  <p>How do I access this function so I can use it to parse the input form data?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="submitArtwork"&gt;
  
      &lt;div class="container"&gt;
  
          &lt;hr class="bg-info"&gt;
  
  
                    &lt;form id="paintingForm" action="#" method="post"&gt;
                      &lt;div class="form-group"&gt;
  
                        &lt;v-text-field 
                          name="aa_name"
                          label="Name of Painting"
                          id="aa_name"
                          v-model="newPainting.aa_name"
                        &gt;&lt;/v-text-field&gt;
  
                        &lt;v-autocomplete
                          label="Medium"
                          :items="mediums"
                          v-on:mouseover="activateHelper('mediumHelper');"
                          v-on:mouseleave="activateHelper('');"
                          v-model="newPainting.aa_medium"
                        &gt;&lt;/v-autocomplete&gt;
  
                        &lt;v-autocomplete 
                          label="Country (optional)"
                          :items="country_list"
                          v-on:mouseover="activateHelper('countryHelper');"
                          v-on:mouseleave="activateHelper('');"
                          v-model="newPainting.aa_country"
                        &gt;&lt;/v-autocomplete&gt;
  
                        &lt;v-autocomplete
                          label="Tags (optional)"
                          :items="tags"
                          multiple
                          v-on:mouseover="activateHelper('tagHelper');"
                          v-on:mouseleave="activateHelper('');"
                          v-model="newPainting.aa_tags"
                        &gt;&lt;/v-autocomplete&gt;
  
                        &lt;v-file-input :rules="rules" prepend-icon="attachment" accept="image/*" multiple label="File input" @change="onFilePicker"&gt;&lt;/v-file-input&gt;
  
                        &lt;v-switch
                          v-model="consentCheck"
                          :label="`Consent: ${consentCheck.toString()}`"
                        &gt;&lt;/v-switch&gt;
  
                      &lt;/div&gt;
  
  
  
                      &lt;div class="form-group"&gt;
                        &lt;button class="btn btn-info btn-block btn-lg" @click="showAddModal=false; addPainting();"&gt;Submit Painting&lt;/button&gt;
                      &lt;/div&gt;
  
                    &lt;/form&gt;
  ...
  
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; !value || value.size &gt; 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 // ------------------------------------&gt;
        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();
          }
        });
        */
      },
    } 
  }
  &lt;/script&gt;
  
  &lt;style&gt;
    ...
  &lt;/style&gt;
  </code></pre>
  
  <p>Thanks</p>