↓のようにv-modelで取得したusernameをconst data内にセットしてAPI呼びたいのですが、
リクエスト投げたタイミングで渡した内容確認してもconst data内のusernameが空のままです。
どうすればconst data内のusernameに値を設定できるのでしょうか?
※API呼び出せるまでは確認済です。
<body>
<div id="app">
<input type="text" id="username" v-model="username" autocomplete="off" placeholder="Enter username">
<button :class="btnClass" @click="loginauth">ログイン</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const username = ref('');
const data = {
'username': username.value
};
const config = {
headers:{
'Content-Type': 'application/json; charset=utf-8',
'X-CSRF-TOKEN': 'ZZZZZZ'
}
};
const loginauth = () => {
axios.post('/test', data, config)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
};
return {
username,
loginauth
};
}
}).mount('#app');
</script>
</body>