[Vuejs]-How to submit a form via ajax in vue 2.6

by

0👍

To make XMLHTTPRequests from Vue.js you would typically use a library. I recommend Axios, which is also referenced in the Vue guide.

I suggest you start by reading those two, but I’ve given a short example how you might apply this to your problem below.

  1. Install axios and import it to your component. You would use a package manager like yarn or npm, if you use npm (commonly used) the following command in your project folder should do it:
npm install axios
  1. Define a submitMyForm() method in your component that is going to submit the form for you by making the axios call. here is a (pseudocode) example of what such a method would look like:
submitMyForm() {
  axios.post('your-api-url', {
    dataField1: value,
    dataField2: value
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}
  1. Add a listener to whatever user action you would like to submit the form, for example:
<button @click="submitMyForm()">Submit</button>
  1. To have the form-data available in your component methods, you would use v-model bindings, here is a link to the guide entry.. In your case, you might define two variables in the data object of your component, one for each of your input fields. you can then send these variables in your axios.post() call.

There are other patterns to do this, one I personally like is to use Vuex and do all api calls in Vuex actions, organized per module. I prefer this because it enables code reuse between components and removes the responsibility of server communication from my components, keeping them nice and simple. But that’s a bit more involved, the above method is good to get started.

0👍

Vue.js has an official package which is called vue-resource which works as an HTTP client, but the official documentation suggests using Axios.

Installing Axios and Setting up a Component

$ npm install axios
OR
$ yarn add axios

Using Axios in Vue Components

<template>
  <div><div/>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {};
  };
}
</script>

now in your case, your template should look like this

<template>
    <div>
        <form :action=" appUrl +'ConnectionHandler'" method="post" enctype="multipart/form-data">
           <fieldset id="fileHandlingButtons" :disabled="is_fileHandler_disabled" >
             <legend>File Handling</legend>
             <input type="file" id="selectFile" name="selectFile" >
             <input type="button" value="Run" id="run" @click.prevent="startRun">
           </fieldset>
        </form>
    <div/>
        </template>

<script>
   import axios from "axios";

   export default {
      data() {
         return {};
      },
      methods: {
           startRun() {
              axios.post("api endpoint")
              .then(response => console.log(response))
           }
      }
   }
</script>

**Note* :* this will not a working code on yours but an idea on how you will solve your problem

Leave a comment