In Vue.js, POST method is not working using axios.post method

Question

I am new to Vue.js. I am trying to create a simple login form, that will submit the values to a ASP.net Web API. When I click the submit button, I do not see the form data under POST. I am using Fiddler to check the POST data, which shows nothing under "WebForms" tab. On the ASP.net Web API the form object is shown as null. (For the sake of simplicity, I am passing hard code value to the post fields)

Following is the HTML inside login.vue

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Log in </div>
    </v-ons-toolbar>
    <p style="text-align: center">
      <img src="../assets/Image logo transparent.png" />
    </p>
    <p style="text-align: center">
      <v-ons-input modifier="underbar" placeholder="Username" type="text" v-model="user.name" float></v-ons-input>
    </p>
    <p style="text-align: center">
      <v-ons-input modifier="underbar" type="password" placeholder="Password" v-model="user.password" float></v-ons-input>
          </p>
    <p style="text-align: center">
      <v-ons-button @click="login($event)">
        <div>Log in</div>

      </v-ons-button>
    </p>
  </v-ons-page>
</template>

Following is the section where POST happens through axios

<script>
   import axios from 'axios'
export default {
  name: 'login',
  data: { username: '',
    password: ''
  },
  computed: {
    user: {
      get () {
        return this.$store.state.user
      }
    }
  },
  methods: {
    login (event) {
      axios.post('http://localhost:54977/api/Roles', {
        username: 'Fred',
        password: 'Flintstone'})
      .then(response => {
        this.$ons.notification.alert('Logeed in. Hurrey!!')
      })
      .catch(e => {
        this.$ons.notification.alert('No donut for you. :(')
        this.errors.push(e)
      })
    }
  }
}
</script>

Prakash P · Accepted Answer · 2017-08-07 10:35:26Z

1

I think you are using the wrong model name. Try

this.user.name and this.user.password

instead of username and password . Also try to write data as a function like

 data: function () { 
   return {
     argument1 : '',
     argument2: '', 
     ..........
   }
}}

answered Aug 7, 2017 at 10:35

Prakash P

3401 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

In Vue.js, POST method is not working using axios.post method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related