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

我是Vue.js的新手。我正在嘗試創建一個簡單的登錄表單，它會將值提交給ASP.net Web API。當我點擊提交按鈕時，我在POST下看不到表單數據。我使用Fiddler來檢查POST數據，它在「WebForms」選項卡下沒有顯示任何內容。在ASP.net Web API上，表單對象顯示爲空。（爲簡單起見，我傳遞硬編碼值到後場）在Vue.js中，POST方法不能使用axios.post方法

以下是HTML裏面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>

以下是哪裏發生了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>

來源

2017-08-07 KurioZ7

我想你使用的是錯誤的型號名稱。嘗試

this.user.name and this.user.password

而不是username and password。也嘗試寫數據作爲一個功能，如

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

來源

2017-08-07 10:35:26

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

回答

相關問題