92602


↓のようにv-modelで取得したusernameをconst data内にセットしてAPI呼びたいのですが、  
リクエスト投げたタイミングで渡した内容確認してもconst data内のusernameが空のままです。  
どうすればconst data内のusernameに値を設定できるのでしょうか？  
※API呼び出せるまでは確認済です。

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2022-12-05T09:10:59.380
92589
2022-12-06T11:52:46.647
2022-12-05T09:17:23.217
55146
55146
question
vue.js
vue.js3 v-modelで入力フォームから取得した値が変数に入ってない


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

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

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

[code]

            const loginauth = () => {
              const data = {
                'username': username.value
              }
    
              axios.post('/test', data, config)
                .then(function (response) {
                  console.log(response);
                })
    
[/code]

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


CC BY-SA 4.0
2022-12-06T11:52:46.647
92602
2022-12-06T11:52:46.647
2376
92589
answer