Vue.jsでは、POSTメソッドがaxios.postメソッドを使用して動作していません

Question

Vue.jsを初めて使用しています私は単純なログインフォームを作成しようとしています。ASP.net Web APIに値を送信します。送信ボタンをクリックすると、POSTの下にフォームデータが表示されません。私は "WebForms"タブの下に何も表示されないPOSTデータをチェックするためにFiddlerを使用しています。 ASP.net Web APIでは、フォームオブジェクトはnullとして表示されます。 （単純化のために、私はポストフィールドにハードコード値を渡しています）

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

後の内部HTMLは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> 

を通じて起こるセクションです

Answer 1

間違ったモデル名を使用していると思います。試してください

this.user.name and this.user.password 

の代わりにusername and password。また、関数としてデータを書き込もうとします。

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