[Vuejs]-How to auto submit form after values are set from api

by

0👍

I think the reason of problem that you have is the action attribute that you set in your form. I don’t know about the back-end structure of your site ( it is node-js or php or … ), but when you are using axios in your project actually you don’t need to use normal way of form submitting (using :action and a submit button to submit form). You could handle it with the help of axios methods. Here is a way that I implement to submit a form (for example a register form) with a vue component:

<template>
  <!-- Sing in  Form -->
  <section>
    <div>
        <form method="post">
            <label for="usernameId">username:</label>  
            <input type="text" id="usernameId" name="username" v-model="username">

            <label for="emailId">email:</label>  
            <input type="email" id="emailId" name="email" v-model="email">

            <label for="passwordId">password:</label>  
            <input type="password" id="passwordId" name="password" v-model="password">

            <button type="button" @click="postData">Submit</button>
        </form>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'formCompo',
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },

  methods: {
      postData: function() {
        let postVar = {
            username: this.username,
            email: this.email,
            password: this.password
        };
        /* put your back-end url in axios.post() for example http://localhost:3200/saml-... */
        axios.post(`http://localhost:8080/stack-overflow/axios-test/datafind.php`, postVar).then((result) => {
            console.log(result);
        }).catch(err => {
            console.error(err);
        });
      }
  },

  mounted() {
    /* put the url that you want to get data from back-end in post.get() */
    axios.get(`http://localhost:8080/stack-overflow/axios-test/dataGet.php`)
        .then(response => {
          console.log(response.data);
          this.username = response.data.username;
          this.email = response.data.email;
          this.password = response.data.password;
          this.postData();
        })
        .catch(e => {
          console.log(e)
        })
        
  }
}
</script>

You could comment only the <form> tag in the above code to see that it works again without any problem. In the code above I used the postData method to post data to back-end with axios. This method could be called when the button is clicked or in the mounted() hook. If you use this method in your project you don’t need to use urlLogin data but you can define conditions that when you use auto submit (in mounted hook) or using button for submitting data. If you used the script that I posted and your problem remained I guess that the problem is from CORS policy that has its own solution depends on your back-end structure. for example this question is a good solution in my opinion if you use php in your back-end.

Leave a comment