Question

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

以下是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>

以下是通过axios发生POST的部分

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

Answer 1

我认为您使用的是错误的型号名称。尝试

this.user.name and this.user.password

而不是username and password。还尝试将数据写为类似

的函数

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

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

1 个答案: