Vue3.js でaxios.post()しようとしたときに、なぜかGET通信になった話

## 起こっている問題
SpringBoot + Vue3.jsでWebアプリを開発していたときに、axiosでフォームのデータをPOSTしようとするとなぜかGET通信になりました。

#### コード例
```vue:AuthFormComponent.vue
<template>
  <form>
    <div>
      <label for="email">メールアドレス</label>
      <input
        v-model="email"
        type="email"
        name="email"
        id="email"
      />
    </div>

    <div>
      <label for="password">パスワード</label>
      <input
        v-model="password"
        type="password"
        name="password"
        id="password"
      />
    </div>

    <div>
      <button @click="submit">送信</button>
    </div>
  </form>
</template>

<script>
import { defineComponent } from '@vue/composition-api';
import axios from 'axios';
import { ref } from 'vue';

export default defineComponent({
  setup() {
    const email = ref('');
    const password = ref('');

    const submit = () => {
      axios
        .post('/login', {
          email: email.value,
          password: password.value,
        })
        .then(() => {
          console.log('post通信に成功しました');
        });
    };

    return {
      email,
      password,
      submit,
    };
  },
});
</script>

```

#### 結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664008/5905d258-1030-09a7-4966-020a54ef486b.png">

このように、なぜかGET通信になってしまいました…。


## 試したこと
### ``URLSearchParams``を使ってみる
[この記事](https://qiita.com/amamamaou/items/b6cb39739bba4abf4544)を参考にして、``URLSearchParams``で書いてみました。
```vue:AuthFormComponent.vue
<script>
import { defineComponent } from '@vue/composition-api';
import axios from 'axios';
import { ref } from 'vue';

export default defineComponent({
  setup() {
    const email = ref('');
    const password = ref('');

    const submit = () => {
      // この部分を修正
      let params = new URLSearchParams();
      params.append('email', email.value);
      params.append('password', password.value);
      axios.post('/login', params).then(() => {
        console.log('post通信に成功しました');
      });
    };

    return {
      email,
      password,
      submit,
    };
  },
});
</script>

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664008/ecf4349f-af56-1e39-1afe-9e1dc7f852fd.png">

相変わらずGET通信です…。
そもそも今回はSpringBootの``RestController``でJSONを受け取れるので、``URLSearchParams``でクエリパラメータを操作する必要がありません。

## 結論
### 原因
``form``タグの中に``button``タグがあると、クリック時に通常のフォームの処理が行われます。このコードだと``form``タグの``method``属性が指定されていないので、デフォルトのGET通信が行われることになります。

### 解決策①
結局axiosで送信するから、``form``タグではなくて``div``タグにする
```vue:AuthFormComponent.vue
<template>
  <!-- formタグからdivタグに変える -->
  <div>
    <div>
      <label for="email">メールアドレス</label>
      <input
        v-model="email"
        type="email"
        name="email"
        id="email"
      />
    </div>

    <div>
      <label for="password">パスワード</label>
      <input
        v-model="password"
        type="password"
        name="password"
        id="password"
      />
    </div>

    <div>
      <button @click="submit">送信</button>
    </div>
  </div>
</template>
```

### 解決策②
``button``タグを単なるボタンとして扱うために、``type``属性を``button``にする
```vue:AuthFormComponent.vue
<template>
  <form>
    <div>
      <label for="email">メールアドレス</label>
      <input
        v-model="email"
        type="email"
        name="email"
        id="email"
      />
    </div>

    <div>
      <label for="password">パスワード</label>
      <input
        v-model="password"
        type="password"
        name="password"
        id="password"
      />
    </div>

    <div>
      <!-- type属性をbuttonにする -->
      <button
        type="button"
        @click="submit"
      >
        送信
      </button>
    </div>
  </form>
</template>
```

#### 結果

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664008/8d3d1182-1063-7ee7-63fb-e73e9f8a3eb3.png">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664008/e4048f35-4db1-c9ef-439d-fbf7ef2e180b.png">

POST通信に成功しました！！

## 終わりに
結論だけ見ると、かなり初歩的なところでつまづいていました。ただ、ライブラリやフレームワークを使っていると、こういった予想外のところでつまづくことが結構あります。いい勉強になりました…。