0

↓のように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>

1 件の回答 1

0

setup内でusername.valueを取得されていますが、この時点で生の値を取得してしまっています。(refのvalueはリアクティブではありません)

React hooksのライフサイクルとは異なり、Composition APIのsetupはコンポーネント作成時に実行されるのでこれではその値が変わることはありません。

期待する挙動を実現するには、例えば

        const loginauth = () => {
          const data = {
            'username': username.value
          }

          axios.post('/test', data, config)
            .then(function (response) {
              console.log(response);
            })

のように必要な時点で値を取り出すなどがあります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。