How to make a .post with Axios (VueJS, Nuxt)

user_14095161 0
Viewed 8476

I am new to web development. I would like to ask about how to create a .post with Axios using Nuxt.

All that I need is just a button that sends three inputs to the NodeJS app.

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Email:</strong>
                        <input type="text" class="form-control" v-model="email">
                        <strong>Password:</strong>
                        <input type="text" class="form-control" v-model="password">
                        <button class="btn btn-success">Submit</button>
                  </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
       return {
         name: '',
         email: '',
         password: ''
       };
    },

    methods: {
       //Would like to use the button to do this:
      async sendData () {
        await this.$axios.get('insert', {
          name: this.name, 
          email: this.email,
          password: this.password })
      }
     }
  }
</script>

Thank you for the help.

axios nuxt.js vue.js
2 Answers

The submit listener should call the method instead:

<form @submit="sendData">

In order to send a POST request:

this.$axios.post('insert', {
          name: this.name, 
          email: this.email,
          password: this.password 
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

For more info, you can visit their page.

user_74863130

You could also import axios locally to your component and use it this way:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                      <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Email:</strong>
                        <input type="text" class="form-control" v-model="email">
                        <strong>Password:</strong>
                        <input type="text" class="form-control" v-model="password">
                        <button class="btn btn-success">Submit</button>
                      </form>
                  </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    };
  },

  methods: {
    //Would like to use the button to do this:
    async formSubmit() {
      await axios.post('route/url', {
        name: this.name, 
        email: this.email,
        password: this.password
      })
      .then(response => {
        console.log(response)
      })
      .catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

Do not forget to call the formSubmit method to actually make a POST request.

Moreover, your form does not seem to have a closing tag </form>.

user_61702330
Related