在Vue.js中，POST方法无法使用axios.POST方法

我是Vue.js的新手。我正在尝试创建一个简单的登录表单，它将把值提交给ASP.net Web API。当我点击提交按钮时，我看不到POST下的表单数据。我正在使用Fiddler检查POST数据，它在WebForms选项卡下没有显示任何内容。在ASP.net Web API上，表单对象显示为null。为了简单起见，我将硬代码值传递给post字段

以下是login.vue中的HTML

<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>

以下是POST通过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>

---

我想你用错型号名称了。试一试

this.user.name and this.user.password

而不是用户名和密码。还可以尝试将数据作为函数写入，如

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